効果が終了するまでjQueryを待機させる方法は？

107

これについては先日読んだと思いますが、どこにも見当たらないようです。要素を削除
するfadeOut()イベントがありますが、フェードアウトが完了する前にjQueryが要素を削除しています。
要素がフェードアウトするまでjQueryを待機させてから、要素を削除するにはどうすればよいですか？

jquery

— uriDium
ソース

167

コールバック関数を指定できます：

$(selector).fadeOut('slow', function() {
    // will be called when the element finishes fading out
    // if selector matches multiple elements it will be called once for each
});

ドキュメントはこちら。

— パオロベルガンティーノ
ソース

ビンゴ。それだと思ったのですが、取り除いた部分だけでなく、全体の機能を入れてやればいいんです。PS誰かが興味を持っているなら、私がそれを読んで今再び見つけた本はLearning JQuery-Better Interaction and Designです。ありがとうございました

— uriDium 2009年

誰かが古いjQueryを使用している場合、この「アニメーション化されたコールバック」のバグは厄介なバグでした：bugs.jquery.com/ticket/5684

— JustAMartin

178

jQuery 1.6バージョンでは、.promise()メソッドを使用できます。

$(selector).fadeOut('slow');
$(selector).promise().done(function(){
    // will be called when all the animations on the queue finish
});

— レイナルドジュニア
ソース

4

ほとんどのメソッドにはコールバック引数があるため、これはほとんどのjQueryアニメーションにとって冗長ですが、promise()またはwhen()を使用するとdone()、サードパーティのメソッドや独自のメソッドからの非常に優れた動作を活用できます。meantioningのための1 .promise()！

— stuartc 2012

4

これまで聞いたことがなく、ただお尻を救った。

— prismspecs

1

私の場合、コードの他の場所で発生している要素の現在のアニメーションにアクセスしようとしていたため、そのコールバックにアクセスできませんでした。+1

— クリスチャン

11

promise（）を使用すると、すべてが完了したときに単一のコールバックを設定することもできます。10個のセットでfadeOut（）を呼び出すと、 'this'が適切なスコープに設定されたものごとに1つのコールバックが存在します。一度だけ発砲したい場合、この機能は非常に役立ちます。また、ゼロ要素に一致することが判明したセレクターでアニメーション化した場合、通常のコールバックは発生しません。何があっても最後にPromise（）が呼び出されます。

— zslayton 2012年

6

次のようにチェーンすることもできます：$(selector).fadeOut('slow').promise().done(function(){...});

— Syclone '25 / 07/25

9

終了する$.when()まで待つのにも使えますpromise：

var myEvent = function() {
    $( selector ).fadeOut( 'fast' );
};
$.when( myEvent() ).done( function() {
    console.log( 'Task finished.' );
} );

失敗する可能性のあるリクエストを実行している場合は、さらに一歩進んでください。

$.when( myEvent() )
    .done( function( d ) {
        console.log( d, 'Task done.' );
    } )
    .fail( function( err ) {
        console.log( err, 'Task failed.' );
    } )
    // Runs always
    .then( function( data, textStatus, jqXHR ) {
        console.log( jqXHR.status, textStatus, 'Status 200/"OK"?' );
    } );

— カイザー
ソース

2

はこの回答のこの部分は$.when()機能しません。なぜならmyEvent()、はプロミスを返さず、$.when()その仕事をするために1つ以上のプロミスを渡すことを期待しているためです。

— jfriend00 2016年

6

切り替えたいものがあれば、同じ場所でフェードアウトして別のフェードアウトする場合、divに{position：absolute}属性を配置すると、両方のアニメーションが互いに重なり合って再生されるため、 1つのアニメーションが終了するのを待ってから、次のアニメーションを開始します。

— サミン
ソース