数秒後に要素とそのすべての子要素をフェードアウトしたい。しかし、指定された時間遅延後にエフェクトが開始されるように指定する方法を見つけていません。
setTimeout(function() { $('#foo').fadeOut(); }, 5000);
5000はミリ秒で5秒です。
私が書いたこの一時停止プラグインを使用します
$.fn.pause = function(duration) {
$(this).animate({ dummy: 1 }, duration);
return this;
};
このように呼び出します:
$("#mainImage").pause(5000).fadeOut();
注:コールバックは必要ありません。
編集: jQuery 1.4。built in delay() メソッドを使用する必要があります。チェックしていませんが、プラグインよりも「賢い」と思います。
以前は、このようなことをしていました
_$('#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
最良の方法は、jQuery遅延メソッドを使用することです。
$( '#my_id')。delay(2000).fadeOut(2000);
チェーンに遅延を追加できるプラグインを作成しました。
たとえば、$( '#div')。fadeOut()。delay(5000).fadeIn(); //要素をフェードアウトし、5秒待ってから要素をフェードインします。
アニメーションハックや過度のコールバックチェーンは使用せず、単純で簡潔な短いコードを使用します。
FadeTo()メソッドを使用し、それに5秒の遅延を設定することにより、setTimeoutの使用を避けることができます。
$("#hideAfterFiveSeconds").click(function(){
$(this).fadeTo(5000,1,function(){
$(this).fadeOut("slow");
});
});