web-dev-qa-db-ja.com

jQuery $ .animate（）複数の要素が、コールバックを1回だけ起動します

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

おそらくこれは単に悪いコードやデザインです-しかし、コールバックを使用してそのうちの1つだけで多くのanimate()呼び出しを行うことと、不必要なコールバックを実行してねじ込むことの両方を回避するために私ができることがあります私のコード/期待される動作で？

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

例： http://jsfiddle.net/uzSE6/ （警告-これはアラートボックスの負荷を表示します）。

jqueryjquery-animatejquery-callback
40
totallyNotLizards

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');
});
104
Yoshi

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回だけ発生します:)

2
bardiir