40

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()、コールバックを使用してそのうちの1つだけで多くの呼び出しを行うことと、不要なコールバックを実行してコード/期待される動作を台無しにすることの両方を回避するために私ができることはありますか？

理想的には、一度だけ実行される単一の「使い捨て」コールバックをコーディングできると思います。そうでなければ、何かがすでにjQueryによってアニメーション化されているかどうかをテストする効率的な方法がありますか？

例： http： //jsfiddle.net/uzSE6/（警告-これにより、大量のアラートボックスが表示されます）。

4

2 に答える 2

107

あなたはwhen次のように使うことができます：

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

http://jsfiddle.net/tyqZq/

代替バージョン：

$('.myElems').animate({width: 200}, 200).promise().done(function () {
  console.log('foo');
});
于 2012-01-09T18:50:07.427 に答える
2

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++;
        }
    });
});

後続のすべてのコールバックがキャンセルされるため、これは1回だけ発生します:)

于 2012-01-09T18:30:31.850 に答える