5

このフィドルでわかるように、私は一度に複数の要素をアニメーション化します。これは私が望むように行われています。しかし、次のステップでは、すべての要素のアニメーションが終了したら、何かを実行したいと思います。これは、complete-functionを使用することでは不可能と思われます。これは、完了したアニメーションごとに起動されるためです（3つの要素、3回の完全なコールバック）。jqueryAPI.animate()も次のように述べています。

複数の要素がアニメーション化されている場合、コールバックは、アニメーション全体に対して1回ではなく、一致した要素ごとに1回実行されます。

それで、すべてのアニメーションが終了したときにイベントを発生させるために私が何ができるかについて何か考えがありますか？

4

5 に答える 5

4 
...animate(...).promise().done(function(){console.log("animate complete!")})
于 2012-04-29T08:13:40.397 に答える
0

さあ、簡単なカウンターを追加しました:)

http://jsfiddle.net/Pz5YB/24/

于 2012-04-11T20:44:00.963 に答える
0

変数を作成して、アニメーションが終了するたびにカウントすることができます。3（または任意の数）に等しい場合は、別の関数を呼び出します。このjsfiddleを参照してください

function animateAll(){
if(flag) return;
flag = true;
 //$('.list-wrapper').scrollLeft(w); // not sure why you need this
 //$('.table-wrapper').scrollLeft(w); // or this
 $('.list-wrapper, .table-wrapper').animate({
     scrollLeft: 2*w,
   }, function(){
       countAni++;
       console.log('finish');
       if(countAni == 3) finishAni()
   }     
 );
 function finishAni(){
     alert('whoohoo ready');   
     flag = false;
 }
于 2012-04-11T20:46:11.850 に答える
0

あなたの場合、あなたは現在アニメーション化されているものを見ることができます：

$(':animated').length

完全なコールバック時：

if($(':animated').length==1)
     console.log('whoohoo ready');

http://jsfiddle.net/Pz5YB/25/

于 2012-04-11T21:41:34.357 に答える
0

受け入れられた答えは、最初は無関係な要素をどのように処理するかについて私には少し不明確でした。最終的に私はこの答えに到達しました：

 $.when(
     $someElement.animate(...).promise(),
     $someOtherElement.animate(...).promise()
).done(function() {
    console.log("whoohoo ready");
});
于 2013-03-15T23:27:26.440 に答える