web-dev-qa-db-ja.com

タイムアウトjQueryエフェクト

要素をフェードインさせてから、5000 ms後に再びフェードアウトさせようとしています。私は次のようなことができることを知っています：

setTimeout(function () { $(".notice").fadeOut(); }, 5000);

しかし、それはフェードアウトのみを制御します。コールバックに上記を追加しますか？

jquerytimeout
100
Coughlin

更新：jQuery 1.4以降、.delay( n )メソッドを使用できます。 http://api.jquery.com/delay/

$('.notice').fadeIn().delay(2000).fadeOut('slow');

注：デフォルトでは、$.show()および$.hide()はキューに入れられないため、$.delay()を使用する場合、そのように設定する必要があります：

$('.notice')
    .show({duration: 0, queue: true})
    .delay(2000)
    .hide({duration: 0, queue: true});

キューの構文を使用することもできますが、これは機能する可能性があります。

jQuery(function($){ 

var e = $('.notice'); 
e.fadeIn(); 
e.queue(function(){ 
  setTimeout(function(){ 
    e.dequeue(); 
  }, 2000 ); 
}); 
e.fadeOut('fast'); 

});

または、あなたは本当に独創的で、それを行うjQuery関数を作成できます。

(function($){ 

  jQuery.fn.idle = function(time)
  { 
      var o = $(this); 
      o.queue(function()
      { 
         setTimeout(function()
         { 
            o.dequeue(); 
         }, time);
      });
  };
})(jQuery);

これは（理論的には、ここでメモリに取り組んでいます）これを行うことができます：

$('.notice').fadeIn().idle(2000).fadeOut('slow');
196
Kent Fredric

私はそれを以下で理解しました：

$(".notice")
   .fadeIn( function() 
   {
      setTimeout( function()
      {
         $(".notice").fadeOut("fast");
      }, 2000);
   });

他のユーザーのために投稿を続けます！

23
Coughlin

@stragerによる素晴らしいハック。次のようにjQueryに実装します。

jQuery.fn.wait = function (MiliSeconds) {
    $(this).animate({ opacity: '+=0' }, MiliSeconds);
    return this;
}

そして、次のように使用します：

$('.notice').fadeIn().wait(2000).fadeOut('slow');
14
Arash Milani

次のようなことができます：

$('.notice')
    .fadeIn()
    .animate({opacity: '+=0'}, 2000)   // Does nothing for 2000ms
    .fadeOut('fast');

悲しいことに、あなたは.animate（{}、2000）だけを行うことはできません-これはバグだと思うので、報告します。

11
strager

Ben Almanは、doTimeoutと呼ばれるjQueryの甘いプラグインを作成しました。多くの素晴らしい機能があります！

ここで確認してください：jQuery doTimeout：setTimeoutと似ていますが、より良い。

7
jason

そのように使用するには、thisを返す必要があります。戻り値がなければ、fadeOut（ 'slow'）は、その操作を実行するオブジェクトを取得しません。

つまり：

  $.fn.idle = function(time)
  {
      var o = $(this);
      o.queue(function()
      {
         setTimeout(function()
         {
            o.dequeue();
         }, time);
      });
      return this;              //****
  }

次にこれを行います：

$('.notice').fadeIn().idle(2000).fadeOut('slow');
5
user128026

これは、jQueryの数行だけで実行できます。

$(function(){
    // make sure img is hidden - fade in
    $('img').hide().fadeIn(2000);

    // after 5 second timeout - fade out
    setTimeout(function(){$('img').fadeOut(2000);}, 5000);
});​

実際の例については、以下のフィドルを参照してください...

http://jsfiddle.net/eNxuJ/78/

1
DaveAlger