超时jQuery效果

Question

我试图让一个元素淡入,然后在5000毫秒再次淡出.我知道我可以这样做:

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

但这只会控制淡出,我会在回调中添加上述内容吗？

Answer 1

更新:从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'); 

Answer 2

我刚刚在下面弄清楚了:

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

我会为其他用户保留帖子!

Answer 3

@strager很棒的黑客.像这样将它实现为jQuery:

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

然后将其用作:

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

Answer 4

你可以这样做:

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

可悲的是,你不能只做.animate({},2000) - 我认为这是一个错误,并会报告它.

Answer 5

Ben Alman为jQuery写了一个名为doTimeout的甜蜜插件.它有很多不错的功能!

在这里查看:jQuery doTimeout:像setTimeout一样,但更好.

Answer 6

为了能够像这样使用它,你需要返回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');