Comment puis-je faire une fonction attendre jusqu'à ce qu'une animation se termine?

Question

J'ai utilisé JQuery pour un petit travail d'animation: une table #photos contient 9 photos et je voudrais augmenter la largeur et la hauteur en utilisant la fonction animate au passage de la souris. Mais pendant que l'animation est en cours d'exécution si l'utilisateur passe à la souris sur une autre photo, il déclenche automatiquement l'animation suivante, donc c'est complètement confus. Que devrais-je faire? Mon code est:

$(function(){ 
    $("#photos tr td img").mouseover(function(){ 
    $(this).animate({"width":"1000px","height":"512px"},2000) 
    }); 
    $("#photos tr td img").mouseout(function(){ 
    $(this).animate({"width":"100px","height":"50px"},2000) 
    });  
}); 

Answer 1

JQuery propose des rappels lorsque l'animation est terminée. Ensuite, il pourrait ressembler à ceci par exemple:

var animating = false; 
$(function(){ $("#photos tr td img").mouseover(
    function() 
    { 
     if(!animating) 
      $(this).animate({"width":"1000px","height":"512px"},2000, easing, function() { animating = true; }); 
    }); 

    $("#photos tr td img").mouseout(
     function() 
     { 
      $(this).animate({"width":"100px","height":"50px"},2000, easing, function() { animating = false; }) 
     }); 
}); 

Answer 2

Vous devriez arrêter toute animation en cours d'exécution avant de lancer un nouveau pour éviter le mess up. C'est probablement la meilleure et la plus simple solution pour ce problème spécifique.

$(function(){ 
    $("#photos tr td img").mouseover(function(){ 
    $(this).stop(); 
    $(this).animate({"width":"1000px","height":"512px"},2000) 
    }); 
    $("#photos tr td img").mouseout(function(){ 
    $(this).animate({"width":"100px","height":"50px"},2000) 
    });  
}); 

Answer 3

En plus des autres réponses que je rechercherais en utilisant le plug-in hoverIntent. Cela évite simplement de déclencher une file d'attente d'animation massive lorsque l'utilisateur balaie la souris sur toutes les photos. Vous ne voulez vraiment que l'animation si l'utilisateur est réellement plané.

Answer 4

Je suppose que la réponse dépend de ce que vous voulez faire sur le deuxième mousout (alors que le premier est toujours animé).

1) Si vous ne voulez rien faire, vous pouvez avoir votre premier vol stationnaire a établi un « animant » état sur l'ensemble TR, peut-être comme ceci:

$tr = $(this).closest("tr"); 
    if ($tr.data("animating") != true) { 
     $tr.data("animating",true); 
     $(this) 
     .stop(true,false) 
     .animate({"width":"1000px","height":"512px"},2000, function(){ 
      $tr.data("animating",false); 
     }); 
    } 

2) Si vous voulez que l'animation originale Pour que votre nouvelle image puisse s'animer, vous devez utiliser .stop() l'ancienne avec les paramètres clearQueue et goToEnd définis sur true. Cela permettra d'assurer que les événements en file d'attente supplémentaires (à partir d'un tas de survols) ne sont pas seulement pour les garder passe minutes, et ça va faire l'animation sauter immédiatement à son état final:

$(this).closest("tr").find("img:animated").stop(true,true); 
    $(this).animate({"width":"1000px","height":"512px"},2000}); 

Answer 5

Toujours vérifier l'animation de file d'attente élément et ne jamais obtenir de conflit à partir de maintenant:

$(function(){ 
    $("#photos tr td img").mouseover(function(){ 
    if($(this).queue("fx").length == 0) 
     $(this).animate({"width":"1000px","height":"512px"},2000) 
    }); 
    $("#photos tr td img").mouseout(function(){ 
     $(this).animate({"width":"100px","height":"50px"},2000) 
    });  
});