Come posso fare una funzione di attesa fino a quando un'animazione completa?

Question

Ho usato jQuery per un piccolo lavoro di animazione: un tavolo #photos contiene 9 foto e vorrei aumentare la larghezza e l'altezza utilizzando la funzione di animate al passaggio del mouse. Ma mentre l'animazione è in esecuzione se l'utente si sposta il mouse a un'altra foto che fa scattare automaticamente l'animazione successiva, quindi è totalmente confuso. Cosa dovrei fare? Il mio codice è:

$(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 offre callback quando l'animazione è completa. Poi si potrebbe assomigliare a questo, per esempio:

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

Si dovrebbe smettere di qualsiasi animazione in esecuzione prima di iniziare uno nuovo per evitare il pasticcio. E 'probabilmente la soluzione migliore e semplice per questo problema specifico.

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

In aggiunta alle altre risposte vorrei considerare di usare il hoverIntent collegare. Questo solo evita di partire una coda massiccia un'animazione quando l'utente trascina il mouse sopra tutte le foto. Si vuole veramente solo l'animazione se l'utente è in realtà aleggiava.

Answer 4

Credo che la risposta dipende da ciò che si desidera che accada sul secondo mousover (mentre il primo è ancora animando).

1) Se si desidera che nulla accada, si può avere la prima hover impostato uno stato di "animazione" nel complesso TR, forse in questo modo:

  $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) Se si desidera che l'animazione originale per terminare così la nuova immagine può animare, avrete bisogno di .Stop () quello vecchio con i parametri clearQueue e gotoEnd impostate su true. Questo farà sì che gli eventi in coda aggiuntivi (da un intero gruppo di libra) non solo a mantenere accadendo per i minuti, e sarà rendere l'animazione passare immediatamente al suo stato finale:

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

Answer 5

Controllare sempre coda animazione del elemento e mai ottenere il conflitto d'ora:

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