javascript - JQuery の効果を遅らせる

Question

要素とそのすべての子要素を数秒遅れてフェードアウトさせたい。しかし、指定された遅延時間の後に効果が開始されるように指定する方法が見つかりませんでした。

score 77 · Accepted Answer

77

setTimeout(function() { $('#foo').fadeOut(); }, 5000);

5000 はミリ秒単位の 5 秒です。

于 2008-10-30T18:18:10.963 に答える

score 43 · Accepted Answer

私はちょうど書いたこの一時停止プラグインを使用します

$.fn.pause = function(duration) {
    $(this).animate({ dummy: 1 }, duration);
    return this;
};

次のように呼び出します。

$("#mainImage").pause(5000).fadeOut();

注: コールバックは必要ありません。

編集: jQuery 1.4 を使用する必要があります。組み込みの delay()メソッド。確認していませんが、プラグインよりも「賢い」と思います。

score 19 · Accepted Answer

以前は、このようなことをしていました

$('#foo').animate({opacity: 1},1000).fadeOut('slow');

要素に既に不透明度 1 があるため、最初のアニメーションは何もしていませんが、しばらくの間一時停止します。

jQuery 1.4 では、これがフレームワークに組み込まれているため、上記のようなハックを使用する必要はありません。

$('#foo').delay(1000).fadeOut('slow');

jQuery.delay()機能は元のプラグインhttp://www.evanbot.com/article/jquery-delay-plugin/4と同じです

score 11 · Accepted Answer

最良の方法は、jQuery 遅延メソッドを使用することです。

$('#my_id').delay(2000).fadeOut(2000);

score 1 · Accepted Answer

（fadeTo（）メソッドを使用し、それに5秒の遅延を設定することで、setTimeoutの使用を回避できます。

$("#hideAfterFiveSeconds").click(function(){
  $(this).fadeTo(5000,1,function(){
    $(this).fadeOut("slow");
  });
});

score 1 · Accepted Answer

チェーンに遅延を追加できるプラグインを作成しました。

例えば $('#div').fadeOut().delay(5000).fadeIn(); // 要素をフェードアウトし、5 秒待ってから要素をフェードインします。

アニメーションのハックや過剰なコールバックチェーンは使用せず、単純でクリーンな短いコードのみを使用します。

6 に答える 6