Wie kann ich eine Funktion warten zu lassen, bis eine Animation abgeschlossen ist?

Question

Ich habe JQuery für eine kleine Animation Arbeit verwendet: eine Tabelle #photos enthält 9 Fotos, und ich mag die Breite und Höhe mit der animate Funktion mit der Maus darüber erhöhen. Aber während die Animation läuft, wenn der Benutzer auf ein anderes Foto zu Maus bewegt er sich automatisch die nächste Animation auslöst, es ist also völlig verwirrt. Was soll ich machen? Mein Code ist:

$(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 bietet Rückrufe, wenn die Animation abgeschlossen ist. Dann könnte es so aussehen zum Beispiel:

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

Sie sollten alle laufenden Animation stoppen, bevor ein neues Starten des Chaos zu vermeiden. Es ist wahrscheinlich die beste und einfachste Lösung für dieses spezielle Problem.

$(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

Zusätzlich zu den anderen Antworten, die ich in mit dem hoverIntent Plugin. Dies vermeidet nur eine massive Animation Warteschlange Einstellung aus, wenn der Benutzer mit der Maus über alle Photos fegt. Sie wollen nur wirklich die Animation, wenn der Benutzer tatsächlich schweben wird.

Answer 4

Ich denke, die Antwort hängt davon ab, was Sie auf der zweiten mousover passieren soll (während der erste noch Animieren).

1) Wenn Sie wollen nichts passieren, können Sie Ihre erste Hover haben eine „belebende“ Zustand auf der ganzen TR gesetzt, vielleicht wie folgt aus:

  $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) Wenn Sie die ursprüngliche Animation kann enden sollen, damit Ihr neues Bild animieren, werden Sie (), um die alten mit der clearQueue und goToEnd Parametern auf true gesetzt .Stop müssen. Dies wird, dass zusätzliche Warteschlange Ereignisse (von einem ganzen Bündel von Hover) sorgt nicht nur halten für Minuten passieren, und es wird die Animation sofort zu seinem Endzustand überspringen machen:

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

Answer 5

Überprüfen Sie immer Warteschlange Animation des Elements und nie Konflikt ab jetzt bekommen:

$(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)
  });       
});