超时 jQuery 效果答案

【问题标题】：Timeout jQuery effects超时 jQuery 效果
【发布时间】：2010-09-23 21:30:26
【问题描述】：

我试图让一个元素淡入，然后在 5000 毫秒内再次淡出。我知道我可以这样做：

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

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

【问题讨论】：

标签： jquery timeout

【解决方案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});

您可以使用队列语法，这可能有效：

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

【讨论】：

我想知道你为什么要使用队列，而 setTimeout 的简单用法也可以工作。
因为如果你使用队列，很容易添加新事件和重用代码，代码重用是一件好事™
请注意，正如 jQuery API 文档中所述，delay() 实际上应该只用于与效果队列相关的事情。如果您需要为其他事情设置超时， setTimeout() 仍然是要走的路。
哇，感谢@bottlenecked 的链接，我想我的示例与添加到 jQuery 的新功能如此相似的原因是这个答案对bugs.jquery.com/ticket/4102 = P

【解决方案2】：

我刚刚想通了：

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

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

【讨论】：

【解决方案3】：

@strager 的绝妙技巧。像这样将它实现到 jQuery 中：

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

然后将其用作：

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

【讨论】：

【解决方案4】：

你可以这样做：

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

遗憾的是，您不能只执行 .animate({}, 2000) - 我认为这是一个错误，并将报告它。

【讨论】：

【解决方案5】：

Ben Alman 为 jQuery 编写了一个不错的插件，名为 doTimeout。它有很多不错的功能！

在这里查看：jQuery doTimeout: Like setTimeout, but better。

【讨论】：

【解决方案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');

【讨论】：

【解决方案7】：

只需几行 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/

【讨论】：