超时 jQuery 效果

Posted 2023-02-25

【中文标题】超时 jQuery 效果

【英文标题】：Timeout jQuery effects

【发布时间】：2010-09-23 21:30:26

【问题描述】：

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

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

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

【参考方案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/