JQuery効果を遅らせる

Question

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

Answer 1

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

5000はミリ秒で5秒です。

Answer 2

作成したばかりのこの一時停止プラグインを使用しています

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

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

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

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

---

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

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

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