2 jQueryアニメーションの完全なコールバックをグループ化するには？

Question

私の関数の実行パスが異なり、1つまたは複数のjQueryメソッドが呼び出される可能性があります。これらのアニメーションは同時に開始する必要があり、シリアル化しないでください。たとえば、次のように

function moveDown() 
{ 
    busy = true; 
    if(some condition) 
    { 
     $(".selFrame").animate({top: $("#row" + currentSelRowIndex).offset().top}); 
    } 
    else 
    { 
     $(".container").animate({scrollTop: $("#row" + currentRowIndex).offset().top - $("#row0").offset().top}); 
     $(".selFrame").animate({top: ($(".selFrame").offset().top + ch - remaining)}); 
    } 
} 

すべてのアニメーションが終了したかどうか、いくつかのbusy変数を使用して検出されていない私の目標は、我々が行ってきましたexacution経路を通ってどんなに。 1つのアニメーションコールでアニメーションcompleteの変数busyをリセットするのは簡単です。しかし、2つ以上のアニメーションを1つのイベントに結合する方法がわかりません。busy変数をリセットして、すべてのアニメーションが完了するようにします。

UPDATE

残念ながらフィルタリングソリューションは、徹底的なテスト後に良好な結果が得られたしませんでした。

それがない場合よりもはるかに優れた作品

document.addEventListener('keydown', function(e) { 
    var runningAnimations = $(".container, .selFrame").filter(":animated").length; 
    if(runningAnimations == 0) 
    { 
     switch(e.keyCode) 
     { 
     case 40: 
      moveDown(); 
      break; 

、時には、再入学を許可するダブルアニメーション例に。

promiseで2番目の方法を試してみます。

Answer 1

あなたは要素のコレクションに関連するすべてのアニメーションが終了したときに通知することにしたい

setTimeOut(function(){ 
    var runningAnimations = $(".container, .selFrame").filter(":animated").length; 
    }, 500); 

、あなたは promise使用できます

$(".container, .selFrame").promise().then(function(){ 
     // all finished 
     // we may change a boolean but usually we would call a callback 
}); 

これは、たとえば、if/elseの直後に入力できます。

Answer 2

あなたは、アニメーションの数を保持する整数を使用し、各アニメーションのコールバックに1を減算しまたはその値が1であるかどうかを確認することができる：

：

if(some condition) 
    { 
     busy = 1; 
     $(".selFrame").animate({top: $("#row" + currentSelRowIndex).offset().top} , function(){ 
      busy--; 
     }); 
    } 
    else 
    { 
     busy = 2; 
     $(".container").animate({scrollTop: $("#row" + currentRowIndex).offset().top - $("#row0").offset().top}, function(){ 
      if(busy == 1) // all the animations have ended 
      busy--; 
     }); 

     $(".selFrame").animate({top: ($(".selFrame").offset().top + ch - remaining), function(){ 
      if(busy == 1) // all the animations have ended 
      busy--; 
     }}); 
    } 

あなたはまたsetTimeOutと:animatedセレクタを使用することができ