javascript - jQueryを続行する前に、アニメーションが完了するのを待ちます

Question

別のコマンドに進む前に、jQueryアニメーションが終了するのを待つ方法はありますか？

たとえば、要素をフェードアウト/スライドアップし、要素内のいくつかのアイテムを変更してから、フェードイン/スライドダウンします。

ステートメントを次々に並べると、アニメーションが完了する前にアイテムが変化するのがわかります。

$('#item').fadeOut();
$('#item').html('Changed item');
$('#item').fadeIn();

ありがとう。

score 3 · Accepted Answer

でコールバックを渡すことができますfadeIn/fadeOut。jQueryドキュメント

$('#item').fadeOut('slow', function(){

     $('#item').html('Changed item');
     $('#item').fadeIn();
});

score 3 · Accepted Answer

次のように、から呼び出されるコールバックメソッドを使用できます。.fadeOut

$('#item').fadeOut('fast', function() {
    $(this).html('Changed item').fadeIn();
});

または、下にあるDeferredオブジェクトを使用します

$('#item').fadeOut('slow').promise().done(function() {
    $(this).html('Changed item').fadeIn();
});

score 1 · Accepted Answer

コールバック関数をに渡しますfadeOut。

$("#item").fadeOut(function() { 
                       $(this).html("changed").fadeIn();
                   });

これは、基本的なjQueryチュートリアルで学習するようなものです。

score 1 · Accepted Answer

$('#item').fadeOut('slow', function() { // do your stuff here });

4 に答える 4