J'ai plusieurs animations sur un seul objet et je dois arrêter une animation spécifique plutôt que toutes. Il ne semble pas que la méthode .stop () peut faire cela.
Par exemple, lors de l'opacité et de la largeur d'animation simultanément, je devra peut-être annuler l'animation d'opacité tout en achetant l'animation de la largeur. Il semblerait que cela ne soit pas possible, mais j'espère que quelqu'un connaît un tour ou un appel d'API qui me manque.
5 Réponses :
Après avoir pensé à cela un peu plus difficile à ce sujet, j'ai réalisé que ce que vous essayez de faire n'est pas facile à faire à cause de la façon dont les animations sont manipulées dans JQuery.
Comme les animations sont gérées par une file d'attente, pas possible d'exécuter des animations simultanées sur le même élément sans qu'ils soient dans la même fonction. P>
C'est-à-dire, P>
var remaining = duration - ($.now() - start);
$(element).animate({opacity: '0.5', remaining)
.stop();
Beacoup de remerciements pour la reponse! Je ne peux pas bien comprendre, mais cela semble que ce code provoque une animation de largeur de 5 secondes, à laquelle l'animation d'opacité commencera. J'ai besoin de pouvoir exécuter à la fois les animations de largeur et d'opacité en même temps (c'est-à-dire la largeur et l'opacité changeant), avec la possibilité d'arrêter l'une ou l'autre avant l'achèvement sans arrêter les deux.
D'accord, j'ai révisé ma réponse maintenant que j'ai bien compris votre question :).
Bonjour Ian - Je voulais juste vous remercier tellement pour une réponse aussi détaillée. J'ai pu trouver une solution directe qui ne nécessite aucune sorte de suivi, alors malheureusement, je ne peux pas vous donner la réponse à la réponse :(. Espérons que vous pourrez utiliser la solution un jour!
Au lieu d'une animation, pouvez-vous rompre dans plusieurs animations plus petites (opacité d'animation de 0 à 20%, puis animer de 20 à 40%, puis 40-60%, etc.) et au lieu de . STOP () - dans l'animation, vous ne le redémarrez pas à nouveau?
Je déteste être un gars qui répond à sa propre question (merci beaucoup pour les réponses détaillées et la mise en service du cerveau!) Mais j'ai trouvé une réponse directe. Apparemment, il existe un paramètre pour la méthode .animate () appelée «file d'attente» qui est par défaut à true, mais vous pouvez définir sur FALSE pour que votre animation ait lieu immédiatement.
Cela signifie que en définissant la file d'attente sur FAUX, vous pouvez exécuter Plusieurs animations utilisant des appels distincts sans avoir à attendre que le précédent se termine. Mieux encore, si vous essayez d'exécuter une animation pour une propriété déjà animée, la seconde remplacera le premier. Cela signifie que vous pouvez arrêter une animation d'une propriété en "l'animer" à sa valeur actuelle avec une durée de 0, à l'aide de la file d'attente "false".
Exemple: Une autre option a été suggérée par un autre contributeur jQuery qui répondu à ma demande d'amélioration. Cela profite de la possibilité d'utiliser une fonction étape sur une animation (les fonctions d'étape sont appelées à chaque point de l'animation et vous pouvez manipuler les paramètres d'animation en fonction des critères que vous souhaitez). Bien que cela aurait également pu résoudre le problème, je sentais que c'était beaucoup plus sale que la "file d'attente".
J'utilise le plug-in Jquery Cycle pour animer une douzaine de diapositives sur la même page en utilisant divers types d'animation différents (lingettes, mélanges, zooms, etc.). J'ai ensuite eu mon propre script de minuscule pour fade légèrement les images lorsque vous avez plané sur chaque diaporama:
# This code suited me better - it leaves the other running animations untouched
$(".box img").hover(
function(){
$(this).animate({opacity: 0.7}, {duration: 1000, queue: false});
},
function(){
$(this).animate({opacity: 1}, {duration: 250, queue: false});
}
);
AS de JQuery 1.7 Vous pouvez utiliser http://api.jquerery.com/animate/ .animate () avec une file d'attente nommée et utiliser .stop (leeename) pour arrêter uniquement ces animations dans la file d'attente. < / p>
http://api.jquerery.com/stop/
J'aurais pensé qu'il y aurait un moyen d'utiliser des files d'attente nommées personnalisées, mais cela ne semble pas que la méthode
.top () peut cibler une file d'attente spécifique (loin que possible de le raconter).Pour l'instant, j'ai apporté une demande de cette fonctionnalité bugs.jquery.com/ticket/8227 < / a>
Quels sont les critères d'arrêt d'une animation? Est-il basé sur une action d'utilisateur?