web-dev-qa-db-ja.com

JQuery効果を遅らせる

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

javascriptjqueryeffects
48
Dónal
setTimeout(function() { $('#foo').fadeOut(); }, 5000);

5000はミリ秒で5秒です。

77
swilliams

私が書いたこの一時停止プラグインを使用します

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

このように呼び出します：

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

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

編集： jQuery 1.4。built in delay（） メソッドを使用する必要があります。チェックしていませんが、プラグインよりも「賢い」と思います。

43
Simon_Weaver

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

_$('#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

19
Drew

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

$（ '＃my_id'）。delay（2000）.fadeOut（2000）;

11
user263865

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

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

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

http://blindsignals.com/index.php/2009/07/jquery-delay/

1
chelfers

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

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