2

私は次のjQueryコードを持っています：

var id = $(this).data('id');
if ($('#container').is(':visible'))
{
    $('#container').slideToggle('fast', function() {
        $('#' + id).toggle();
    });
}
else
{
    $('#' + id).toggle(0, function() {
        $('#container').slideToggle('fast');
    });
}

このコードは、ここでは投稿しない、はるかに大きなメソッドに含まれています。このメソッドは、一連のボタンのスタイルと動作を切り替える役割を果たします。上記のコードでは、ボタンが押されたときにコンテナーが表示/非表示になります。ボタンが現在押されている（したがってコンテナーが表示されている）が、ユーザーが別のボタンをクリックした場合、上記のメソッドが最初に呼び出されて現在押されているボタンでコンテナーが非表示になり、次にクリックしたばかりのボタンで呼び出されてコンテナーが表示されます。

問題は、現在押されているボタンのアニメーションが、押されたばかりのボタンに対してメソッドが実行される前に終了しない（またはデバッグ中に観察したように開始されていないように見える）ことです。

このメソッドから戻る前に、アニメーションキューが空になるのをコードで待機させる方法を知っている人はいますか？

4

1 に答える 1

1

Deferredアニメーション化された要素に対してjQueryによって提供される/オブジェクトを操作する必要がありpromiseます（XHRリクエストなどの他のものと一緒に）。

つまり、あなたはいつでもそのような約束に引っ掛かることができます

function foo() {
    return $('#someElement').slideToggle('fast', function() {
    }).promise();
}

そしてそれを次のように呼びます

foo().done(function() {
    alert('animation finished');
}

デモ： http： //jsfiddle.net/dCVnG/

于 2012-08-28T22:52:44.063 に答える