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?
3 réponses
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.
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
setInterval retourne un index d'intervalle et non une fonction.
var increaseOpacity = function() {
// ...
if (opacity >= target) {
clearInterval(increaseOpacityInterval);
}
};
var increaseOpacityInterval = setInterval(increaseOpacity);