如何使用jQuery淡出div？

Is there any way to fadeout a div after 5 Seconds without using a setTimeOut function?

有没有办法在不使用setTimeOut函数的情况下在5秒后淡出div？

7 个解决方案

#1

115

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的原生

#2

Case 1: if you want to start fadeOut after 5 seconds, use this:

情况1：如果你想在5秒后启动fadeOut，请使用：

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 duration of fadeOut to be 5 seconds, use this:

情况2：如果您希望fadeOut的持续时间为5秒，请使用：

$('#div').fadeOut(5000)

#3

How about the fadeOut() function. Would look something like this:

fadeOut（）函数怎么样？看起来像这样：

$("#myDiv").fadeOut(5000);

#4

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 start after 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 are some more cool, useful functions.

这里有一些更酷，更实用的功能。

#5

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 fadeout函数可以在div上使用，它将减少元素的不透明度，直到它为0，然后不显示div。淡入淡出的速度是该功能的参数。

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准备好时根据您的需要启动它。

#6

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

注意：你并不需要一个回调。

#7

Assuming you mean 'wait five seconds and then fade out', I think you'll have to use a plugin to force the delay, eg this one

假设你的意思是“等待五秒然后淡出”，我认为你将不得不使用一个插件来强制延迟，例如这个

#1

115