jQueryで5秒間待つ方法は？

ページが読み込まれる効果を作成しようとしています。5秒後に、画面の成功メッセージがフェードアウトするか、上にスライドします。

どうすればこれを達成できますか？

組み込みのjavascript setTimeout。

setTimeout(
  function() 
  {
    //do something special
  }, 5000);

UPDATE：ページの読み込みが完了してから待機したいので、そのコードを$(document).ready(...);スクリプト内に配置します。

更新2：jquery 1.4.0が.delayメソッドを導入しました。ご覧ください。.delayはjQueryエフェクトキューでのみ機能することに注意してください。

通常のJavaScriptタイマーを使用します。

$(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
});

DOMの準備ができてから5秒待ちます。ページが実際に表示されるまで待機する場合は、loadedこれを使用する必要があります。

$(window).load(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
})

編集： jQueryでそれを行う方法があるかどうかを尋ねるOPのコメントへsetTimeoutの回答で、答えを使用しないことはできません。しかし、より「jQueryish」にしたい場合は、次のようにラップできます。

$.wait = function( callback, seconds){
   return window.setTimeout( callback, seconds * 1000 );
}

その後、次のように呼び出すことができます。

$.wait( function(){ $("#message").slideUp() }, 5);

私はこの質問に遭遇し、このトピックに関する最新情報を提供すると思いました。jQuery（v1.5 +）にはDeferredモデルが含まれています（jQuery 3までPromises / A仕様に準拠していないにもかかわらず） 一般に、多くの非同期問題にアプローチするためのより明確な方法と見なされています。$.wait()このアプローチを使用したメソッドの実装は、特に読みやすいと思います。

$.wait = function(ms) {
    var defer = $.Deferred();
    setTimeout(function() { defer.resolve(); }, ms);
    return defer;
};

そして、それを使用する方法は次のとおりです。

$.wait(5000).then(disco);

ただし、一時停止後、1つのjQuery選択に対してのみアクションを実行する場合は、.delay()内部でDeferredも使用していると私が信じているjQueryのネイティブを使用する必要があります。

$(".my-element").delay(5000).fadeIn();

setTimeout(function(){


},5000); 

コードを { }

300 = 0.3 seconds

700 = 0.7 seconds

1000 = 1 second

2000= 2 seconds

2200 = 2.2 seconds

3500 = 3.5 seconds

10000 = 10 seconds

等

クリックですぐに閉じることができるメッセージオーバーレイにこれを使用しているか、10秒後に自動クローズします。

button = $('.status-button a', whatever);
if(button.hasClass('close')) {
  button.delay(10000).queue(function() {
    $(this).click().dequeue();
  });
}

下線ライブラリはまた、「遅延」機能を提供します。

_.delay(function(msg) { console.log(msg); }, 5000, 'Hello');

ジョーイの答えに基づいて、私は意図された（jQueryによって、「キュー」について読む）ソリューションを思いつきました。

それはjQuery.animate（）構文にいくらか従います-他のfx関数とチェーンすることができ、「遅い」と他のjQuery.fx.speedsをサポートするだけでなく、完全にjQueryです。アニメーションを停止すると、アニメーションと同じように処理されます。

jsFiddleテストグラウンド（.stop（）を披露するなど）の使用量が多い場合は、こちらで確認できます。

ソリューションの中核は次のとおりです。

$('<queue/>')
.delay(100 /*ms*/)
.queue( (next) => { $('#result').text('done.'); next(); } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

$ .wait（）と$（..）。wait（）の使用をサポートするプラグインとしての全体：

// add wait as $.wait() standalone and $(elem).wait() for animation chaining
(function($) {

  $.wait = function(duration, completeCallback, target) {
    $target = $(target || '<queue />');
    return $target.delay(duration).queue(function(next){completeCallback && completeCallback.call($target); next();});
  }

  $.fn.wait = function(duration, completeCallback) {
    return $.wait.call(this, duration, completeCallback, this);
  };

})(jQuery);

//TEST
$(function() {

  // stand alone
  $.wait(1000, function() {
    $('#result')
    .append('...done');
  });

  // chained
  $('#result')
  .append('go...')
  .wait('slow', function() {
    $(this).append('after slow');
  })
  .css({color: 'green'});
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

注：待機がアニメーションスタックに追加されるため、$。css（）はすぐに実行されます-想定されているとおり、jQueryの動作が予想されます。

$( "#foo" ).slideUp( 300 ).delay( 5000 ).fadeIn( 400 );

これは古い質問であることを認識してください。ただし、この問題に対処するために誰かが役立つと思われるプラグインを作成しました。

https://github.com/madbook/jquery.wait

これを行うことができます：

$('#myElement').addClass('load').wait(2000).addClass('done');