css - 時間指定された jquery イベントのキューイングが正しく機能しない

Question

したがって、id="c1" という空の div を display:none に設定しています。

フェードインして次のように言うようにキューに入れようとしています：2秒

1 秒後に次のように表示されます: 1 秒

その後フェードアウトし、ページがリダイレクトされます。

$('#c1').html('2 seconds').fadeIn('fast').delay(800).html('1 second').delay(800).fadeOut('fast');

しかし、実行すると「1秒」しか表示されず、フェードアウトします。2 秒のメッセージがまったく表示されません。jquery が最後の "html" イベントだけをリッスンしているかのようです。

また、htmlのデフォルトテキストとしてdivに「2秒」を入力してみました。それもうまくいきません。ページが読み込まれるとすぐに「1秒」と表示されます。

解決策を編集

次のようなことができます。

$('#c1').html('2').fadeIn('fast').delay(800).queue(function () {$(this).html('1');$(this).dequeue();}).delay(800).fadeOut('fast');

score 2 · Accepted Answer

html() のような他の関数ではなく、delay() アニメーションのみを実行できます。それらは即座に実行されます。

代わりに html() 関数のタイムアウトを使用するか、アニメーションコールバックに配置します。

$('#c1').html('2 seconds').fadeIn(1000, function() {
   $(this).html('1 second').fadeOut(1000);
});

score 1 · Accepted Answer

試す

    $('#c1').html('2 seconds')fadeIn('fast');
    setTimeout($('#c1').html('1     second'), 800);
    setTimeout($('#c1').fadeOut('fast'), 800);

score 1 · Accepted Answer

そうです、ドキュメントには「標準エフェクトキューまたはカスタムキューで使用できます」と記載されていますが、.html() などの操作はエフェクトキューを使用していません...

3 に答える 3