jQuery的$ .animate（）的多個元素，但只有火回調一次

Question

如果選擇元素的類或者集合使用jQuery動畫：

$('.myElems').animate({....}); 

然後還要使用回調函數，你結束了一個很多不必要的animate()來電。

var i=1; 
$('.myElems').animate({width:'200px'}, 200, function(){ 
    //do something else 
    $('#someOtherElem').animate({opacity:'1'}, 300, function(){   
     if (i>1) console.log('the '+i+'-th waste of resources just finished wasting your resources'); 
     i++; 
    }); 
}); 

可以說這只是糟糕的代碼和/或設計 - 但有什麼我可以做，既避免了使用回調有很多animate()調用其中只有一個，並且具有執行不必要的回調的負荷和擰我的代碼/預期的行爲？

理想情況下，我只能編寫一個只能運行一次的「一次性」回調 - 否則可能有一種有效的方法來測試某些東西是否已被jQuery動畫化？

例如：http://jsfiddle.net/uzSE6/（警告 - 這將顯示一個警報框的負載）。

Answer 1

您可以使用when像：

$.when($('.myElems').animate({width: 200}, 200)).then(function() { 
    console.log('foo'); 
}); 

http://jsfiddle.net/tyqZq/

Alterna te版本：

$('.myElems').animate({width: 200}, 200).promise().done(function() { 
    console.log('foo'); 
}); 

Answer 2

您可以創建一個變量來阻止第二+回調...

var i=1; 
$('.myElems').animate({width:'200px'}, 200, function(){ 
    //do something else 
    $('#someOtherElem').animate({opacity:'1'}, 300, function(){   
     if (i>1) return; 
     else 
     { 
      console.log('the '+i+'-th waste of resources just finished wasting your resources'); 
      i++; 
     } 
    }); 
}); 

這隻會爲每個後續回調閃光一次將被取消:)