Animazioni sincrone in jQuery, non utilizzando i callback?

Question

non posso usare le richiamate perché ho uno scenario come questo (pseudo-codice):

$('.box').on('click', function() { 
    $('.expanded-box').animate({ 
     // shrink it 
    }); 

    $(this).animate({ 
     // grow it 
     $(this).addClass('expanded-box'); 
    }); 
}); 

non riesco a mettere l'animazione di espansione all'interno del callback per l'animazione expanded-box crescita, perché essa non può sempre accadere . Ma ho bisogno che la seconda animazione attenda fino a quando il precedente non è finito. Come posso fare questo?

Answer 1

Dal jQuery 1.6, è possibile utilizzare promise() per ottenere un Promise object che sarà risolto quando tutte le animazioni su un determinato elemento sono state completate. Inoltre, la documentazione dice:

L'utilizzo di .promise() su una raccolta senza animazione attiva restituisce una promessa risolta in .

, pertanto è ben adatto al vostro caso d'uso, e si può scrivere:

$('.box').on('click', function() { 
    var $this = $(this); 
    $('.expanded-box').animate({ 
     // shrink it 
    }).promise().done(function() { 
     $this.animate({ 
      // grow it 
     }).addClass('expanded-box'); 
    }); 
}); 

Answer 2

È possibile incapsulare il codice della seconda animazione in una funzione e quindi chiamare tale funzione dal callback della prima animazione o chiamarlo se la prima animazione non si verifica. Supponendo che l'idea è quello di ridurre qualche altro controllo che aveva la classe "espansa-box" da un precedente scatto:

$('.box').on('click', function() { 
    var $this = $(this), 
     $exp = $(".expanded-box"); 

    function grow() { 
     $this.animate({ 
      width: "200px", height: "100px" 
     }).addClass('expanded-box'); 
    } 

    if ($exp.length > 0) { 
     $exp.animate({ 
      width: "100px", height: "50px" 
     }, grow).removeClass("expanded-box"); 
    } else { 
     grow(); 
    }   
});​ 

Demo: http://jsfiddle.net/PXddm/