Wie kann ich eine Funktion warten, bis eine animation abgeschlossen ist?

Habe ich verwendet JQuery für eine kleine animation arbeiten: eine Tabelle #photos enthält 9 Fotos, und ich möchte, um zu erhöhen die Breite und die Höhe mithilfe der animate Funktion bei mouseover. Aber während die animation läuft, wenn der Benutzer bewegt die Maus, um ein weiteres Foto-es löst automatisch die nächste animation, es ist also völlig verwirrt. Was soll ich tun? 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)
  });       
});
InformationsquelleAutor praveenjayapal | 2009-07-03
  1. 6

    JQuery bietet Rückrufe, wenn die animation abgeschlossen ist.
    Dann könnte es beispielsweise so Aussehen:

    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; }) 
        });
});
    InformationsquelleAutor Daff
  2. 4

    Sollten Sie beenden alle aktiven animation bevor Sie einen neuen ein um zu vermeiden das Durcheinander.
    Es ist wahrscheinlich die beste und einfachste Lösung für dieses spezifische 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)
  });       
});
    • außer Sie könnte genauso gut Kette em. $(this).stop().animate(...) und "hover"
    • +1 danke, genau was ich gebraucht habe.
    InformationsquelleAutor MazarD
  3. 1

    Zusätzlich zu den anderen Antworten, die ich Aussehen würde, in der hoverIntent plugin. Diese verhindert nur, dass die Einstellung off eine massive animation-queue, wenn der Benutzer fegt Sie mit der Maus über alle Fotos. Sie nur wirklich wollen, dass die animation, wenn der Benutzer tatsächlich schwebte.

    InformationsquelleAutor redsquare
  4. 1

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

    1) Wenn Sie möchten, dass nichts geschieht, können Sie Ihre ersten hover-stellen Sie eine "Animation" - Zustand auf der ganzen TR, vielleicht so:

      $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 möchten, dass die original-animation zu Ende, so dass Sie Ihre neue Bild animieren können, müssen Sie .stop() den alten mit dem clearQueue und goToEnd Parameter auf true gesetzt ist. Dadurch wird sichergestellt, dass zusätzliche Ereignisse in der Warteschlange (von einem ganzen Haufen schwebt) nicht nur halten tut sich seit Minuten, und es werden damit die animation sofort überspringen zu seinem Endzustand:

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

    Immer überprüfen, Warteschlangen-animation von element und kommen nie in Konflikt ab jetzt:

    $(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)
  });       
});
    InformationsquelleAutor Amin Mousavi
Schreibe einen Kommentar