超时jQuery效果

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

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

但这只会控制淡出，我会在callback中添加上面的？

Answer 1

更新：从jQuery 1.4开始，您可以使用.delay( n )方法。 http://api.jquery.com/delay/

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

注意 ： $.show()和$.show()在默认情况下是不排队的，所以如果你想使用$.delay() ，你需要这样configuration它们：

 $('.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的甜蜜插件。 它有很多不错的function！

看看这里： 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'); 

Answer 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/