1. ホーム
  2. jquery

[解決済み] タイムアウト jQueryエフェクト

2023-01-15 16:07:50

質問

ある要素をフェードインさせ、5000msで再びフェードアウトさせたいと思っています。私はこのようなことを行うことができることを知っています。

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

しかし、これではフェードアウトの制御しかできないので、コールバックで上記を追加することになるのでしょうか?

どのように解決するのですか?

更新しました。 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});


Queue構文が使える可能性があります。

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');