J'utilise le code suivant pour animer l'opacité d'un élément:

      var opacity = 0 // starting opacity
      var step = 0.1 // step size
      var target = 1 // target value
      var time = 50 // delay in milliseconds
      // start timer loop, and record it's index
      var increaseOpacity = setInterval(function () {
        // assuming your selector works, set opacity
        $(`#pano-${index}`).attr({ opacity: opacity })
        // increment opacity by step size
        opacity += step
        // if we reached our target value, stop the timer
        if (opacity >= target) {
          clearInterval(increaseOpacity)
        }
      }, time)

      $('.pano').attr({ opacity: 0 })
      increaseOpacity()

Ça marche. Cependant, j'obtiens Uncaught TypeError: increaseOpacity is not a function chaque fois que j'exécute la fonction.

Pourquoi est-ce et comment y remédier?

0
alex 7 mars 2016 à 09:02

3 réponses

Meilleure réponse

Cependant, j'obtiens Uncaught TypeError: augmenterOpacité n'est pas une fonction chaque fois que j'exécute la fonction.

increaseOpacity n'est pas un objet fonction, c'est un identifiant pour la minuterie afin que clearInterval puisse arrêter et effacer la minuterie plus tard.

Pourquoi est-ce et comment y remédier?

Vous pouvez simplement supprimer cet appel de fonction car il sera automatiquement appelé par la méthode setInterval.

2
gurvinder372 7 mars 2016 à 06:04

Ce que vous faites, c'est simplement de mettre setInterval dans un var, ce qui signifie que vous définissez un var pour vous souvenir de la fonction d'exécution temporelle

Il n'y a pas besoin de l'appeler car il s'exécute de quelque façon que ce soit par le flux de votre code ce que vous pourrez utiliser votre nouvelle var augmenter

Si vous voulez que cette étape soit appelée en fonction, tout ce que vous devez faire est

var increaseOpacity = function(){
    var SomeNewVarForInterval = setInterval(function () {
    // assuming your selector works, set opacity
    $(`#pano-${index}`).attr({ opacity: opacity })
    // increment opacity by step size
    opacity += step
    // if we reached our target value, stop the timer
    if (opacity >= target) {
      clearInterval(SomeNewVarForInterval)
    }
  }, time)
}

Il est préférable que vous vous souveniez toujours de setInterval dans un var si vous souhaitez l'effacer quelque part dans le futur

0
Alexander Sasha Shcherbakov 7 mars 2016 à 06:11

setInterval retourne un index d'intervalle et non une fonction.

var increaseOpacity = function() {
  // ...
   if (opacity >= target) {
     clearInterval(increaseOpacityInterval);
   }
};

var increaseOpacityInterval = setInterval(increaseOpacity);
1
Arnaud Gueras 7 mars 2016 à 06:05