超时 jQuery 效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/316278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Timeout jQuery effects
提问by Coughlin
I am trying to have an element fade in, then in 5000 ms fade back out again. I know I can do something like:
我试图让一个元素淡入，然后在 5000 毫秒内再次淡出。我知道我可以这样做：
setTimeout(function () { $(".notice").fadeOut(); }, 5000);
But that will only control the fade out, would I add the above on the callback?
但这只会控制淡出，我会在回调中添加上述内容吗？
回答by Kent Fredric
Update:As of jQuery 1.4 you can use the .delay( n )method. http://api.jquery.com/delay/
更新：从 jQuery 1.4 开始，您可以使用该.delay( n )方法。http://api.jquery.com/delay/
$('.notice').fadeIn().delay(2000).fadeOut('slow');
Note: $.show()and $.hide()by default are not queued, so if you want to use $.delay()with them, you need to configure them that way:
注：$.show()与$.hide()缺省情况下不会排队，所以如果你想使用$.delay()它们，你需要配置他们的方式：
$('.notice')
.show({duration: 0, queue: true})
.delay(2000)
.hide({duration: 0, queue: true});
You could possibly use the Queue syntax, this might work:
您可以使用 Queue 语法，这可能有效：
jQuery(function($){
var e = $('.notice');
e.fadeIn();
e.queue(function(){
setTimeout(function(){
e.dequeue();
}, 2000 );
});
e.fadeOut('fast');
});
or you could be really ingenious and make a jQuery function to do it.
或者你可以非常巧妙地制作一个 jQuery 函数来做到这一点。
(function($){
jQuery.fn.idle = function(time)
{
var o = $(this);
o.queue(function()
{
setTimeout(function()
{
o.dequeue();
}, time);
});
};
})(jQuery);
which would ( in theory , working on memory here ) permit you do to this:
这将（理论上，在这里处理内存）允许您这样做：
$('.notice').fadeIn().idle(2000).fadeOut('slow');
回答by Coughlin
I just figured it out below:
我只是想通了下面：
$(".notice")
.fadeIn( function()
{
setTimeout( function()
{
$(".notice").fadeOut("fast");
}, 2000);
});
I will keep the post for other users!
我会为其他用户保留帖子！
回答by Arash Milani
Great hack by @strager. Implement it into jQuery like this:
@strager 的伟大黑客。像这样在jQuery中实现它：
jQuery.fn.wait = function (MiliSeconds) {
$(this).animate({ opacity: '+=0' }, MiliSeconds);
return this;
}
And then use it as:
然后将其用作：
$('.notice').fadeIn().wait(2000).fadeOut('slow');
回答by strager
You can do something like this:
你可以这样做：
$('.notice')
.fadeIn()
.animate({opacity: '+=0'}, 2000) // Does nothing for 2000ms
.fadeOut('fast');
Sadly, you can't just do .animate({}, 2000) -- I think this is a bug, and will report it.
可悲的是，你不能只做 .animate({}, 2000) —— 我认为这是一个错误，并将报告它。
回答by jason
Ben Alman wrote a sweet plugin for jQuery called doTimeout. It has a lot of nice features!
Ben Alman 为 jQuery 编写了一个名为 doTimeout 的插件。它有很多不错的功能！
Check it out here: jQuery doTimeout: Like setTimeout, but better.
回答by user128026
To be able to use it like that, you need to return this. Without the return, fadeOut('slow'), will not get an object to perform that operation on.
为了能够像那样使用它，您需要返回this. 如果没有返回，fadeOut('slow') 将不会得到一个对象来执行该操作。
I.e.:
IE：
$.fn.idle = function(time)
{
var o = $(this);
o.queue(function()
{
setTimeout(function()
{
o.dequeue();
}, time);
});
return this; //****
}
Then do this:
然后这样做：
$('.notice').fadeIn().idle(2000).fadeOut('slow');
回答by DaveAlger
This can be done with only a few lines of jQuery:
这可以只用几行 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);
});?
see the fiddle below for a working example...
有关工作示例，请参阅下面的小提琴...
