Synchroniczne animacje w jQuery, bez użycia połączeń zwrotnych?

Question

nie mogę użyć wywołania zwrotne, bo mam scenariusz tak (pseudo-kod):

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

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

nie mogę umieścić animację ekspansji w zwrotnego dla animacji expanded-box wzrostu, ponieważ nie zawsze może się zdarzyć . Ale potrzebuję drugiej animacji, aby poczekać, aż skończy się poprzednia. Jak mogę to zrobić?

Answer 1

Od jQuery 1.6, można użyć promise() do uzyskania Promise object że zostanie rozwiązany, gdy wszystkie animacje na danym elemencie zostały zakończone. Ponadto dokumentacja mówi:

Użycie .promise() na kolekcji bez aktywnej animacji zwraca rozstrzygniętą obietnicę .

Dlatego to dobrze nadaje się do przypadku użycia, można napisać:

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

Answer 2

Można zaimplementować kod drugiej animacji w funkcji, a następnie wywołać tę funkcję z wywołania zwrotnego pierwszej animacji, wywołując ją, jeśli pierwsza animacja się nie stanie. Zakładając, że ten pomysł jest do kurczyć jakąś inną kontrolę, która miała klasę „rozszerzony-Box” z poprzedniej kliknij:

$('.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/