如何使用 jQuery 淡出 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/536502/
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
How can I fade out a div using jQuery?
提问by Shiva Srikanth Thummidi
Is there any way to fadeout a div after 5 Seconds without using a setTimeOut function?
有没有办法在不使用 setTimeOut 函数的情况下在 5 秒后淡出 div？
回答by ExodusNicholas
everyone knows that in jquery 1.4 there's a delay function now, right?
每个人都知道在 jquery 1.4 中现在有一个延迟功能，对吗？
$('#div').delay(5000).fadeOut(400)
that's how you do it, without having to add any custom functions or plug-ins. it's native to jquery 1.4
这就是您的操作方式，无需添加任何自定义功能或插件。它是 jquery 1.4 原生的
回答by Ionu? Staicu
Case 1: if you want to startfadeOut after 5 seconds, use this:
情况 1：如果您想在 5 秒后开始淡出，请使用：
jQuery.fn.delay = function(time,func){
return this.each(function(){
setTimeout(func,time);
});
};
Then, use it like this:
然后，像这样使用它：
$('#div').delay(5000, function(){$(#div').fadeOut()})
You can't achieve this without using setTimeOut at all
根本不使用 setTimeOut 就无法实现这一点
Case 2: if you want the durationof fadeOut to be 5 seconds, use this:
情况 2：如果您希望淡出的持续时间为 5 秒，请使用：
$('#div').fadeOut(5000)
回答by ckramer
回答by Juri
I just had the same problem and in my opinion the marked answer doesn't actually really satisfy the question. If one specifies it like
我只是遇到了同样的问题，在我看来，标记的答案实际上并不能真正满足问题。如果一个人指定它像
$("#myDiv").fadeOut(5000);
as suggsted, the fading process itself will last for 5 seconds, but not startafter 5 seconds.
根据建议，衰落过程本身将持续 5 秒，但在 5 秒后不会开始。
So I was searching for an alternative, without having to include another jQuery plugin etc. The simplest solution I came up with was to write it as follows:
所以我正在寻找替代方案，而不必包含另一个 jQuery 插件等。我想出的最简单的解决方案是将其编写如下：
$("#myDiv").fadeTo(5000,1).fadeOut(1000);
It uses the fadeTo effect and it is somehow a "hack". I let the fadeTo run for 5 seconds and let it fade to 1 = 100% opacity. In this way the user doesn't perceive any change. Afterwards the normal call to fadeOut with a duration of the effect of 1 second.
它使用了fadeTo 效果，它在某种程度上是一个“黑客”。我让fadeTo 运行5 秒，让它淡化到1 = 100% 不透明度。通过这种方式，用户不会感觉到任何变化。然后正常调用fadeOut，效果持续时间为1 秒。
I guess this solution is quite simple since it doesn't require any additional plugin and can be written in 1 line.
我想这个解决方案非常简单，因为它不需要任何额外的插件并且可以用 1 行编写。
Cheers.
干杯。
//EDIT:
Apparently there is now the possibility to do something like this:
//编辑：
显然现在有可能做这样的事情：
$('#myDiv').delay(800).fadeOut(1000);
Here aresome more cool, useful functions.
这里有一些更酷、更有用的功能。
回答by Simon_Weaver
// i use this pause plugin i just wrote
// 我使用我刚刚写的这个暂停插件
$.fn.pause = function(duration) {
$(this).animate({ dummy: 1 }, duration);
return this;
};
Call it like this :
像这样称呼它：
$("#mainImage").pause(5000).fadeOut();
Note: you don't need a callback.
注意：您不需要回调。
回答by danivovich
Not sure if you want it to take 5 seconds or start in 5 seconds.
不确定您是希望它花费 5 秒还是在 5 秒内开始。
For it to take 5 seconds: The jQuery fadeout function can be used on a div, and it will reduce the element's opacity until it is 0 and then display none the div. The speed of the fade is a parameter for the function.
让它花5秒：jQuery的淡出功能可以在一个div上使用，它会降低元素的不透明度，直到它为0，然后不显示div。淡入淡出的速度是函数的一个参数。
http://docs.jquery.com/Effects/fadeOut#speedcallback
http://docs.jquery.com/Effects/fadeOut#speedcallback
To start it in 5 seconds, you'll need some sort of timer that starts when the document or window is ready, or when the div is ready depending on what you want.
要在 5 秒内启动它，您需要某种计时器，该计时器在文档或窗口准备好时启动，或者在 div 准备好时启动，具体取决于您想要什么。
