如何使用 jQuery 淡出 div？答案

【问题标题】：How can I fade out a div using jQuery?如何使用 jQuery 淡出 div？
【发布时间】：2011-02-25 00:04:45
【问题描述】：

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

【问题讨论】：

标签： jquery

【解决方案1】：

大家都知道jquery 1.4现在有延迟功能了吧？

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

您就是这样做的，无需添加任何自定义函数或插件。它是 jquery 1.4 原生的

【讨论】：

【解决方案2】：

案例 1：如果你想在 5 秒后开始淡出，使用这个：

jQuery.fn.delay = function(time,func){
    return this.each(function(){
        setTimeout(func,time);
    });
};

然后，像这样使用它：

$('#div').delay(5000, function(){$(#div').fadeOut()})

不使用 setTimeOut 根本无法实现这一点

案例 2：如果您希望淡出的 duration 为 5 秒，请使用：

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

【讨论】：

【解决方案3】：

fadeOut() 函数怎么样。看起来像这样：

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

【讨论】：

这并不能真正回答问题。他想在 5 秒后褪色，而不是在 5 秒后褪色。
我想在动画开始前等待 5 秒。解决了，我把函数写成 $("div").fadeOut(10000);然后它就像我想要完全不使用 setTimeOut() 函数一样工作。谢谢！
其实fadeout立即开始:(
我同意你们的cmets朋友，当这个问题发布时，那个时候这个问题没有合适的答案，我也不想使用setTimeOut（）或任何其他插件，好的现在我将接受这个问题的正确答案。感谢您宝贵的 cmets。

【解决方案4】：

我只是遇到了同样的问题，在我看来，标记的答案实际上并不能真正满足问题。如果有人指定它像

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

按照建议，淡入淡出过程本身将持续 5 秒，但不会在 5 秒后开始。

所以我一直在寻找替代方案，而不必包含另一个 jQuery 插件等。我想出的最简单的解决方案是这样编写：

$("#myDiv").fadeTo(5000,1).fadeOut(1000);

它使用了 fadeTo 效果，它在某种程度上是一个“hack”。我让 fadeTo 运行 5 秒，让它褪色到 1 = 100% 不透明度。以这种方式，用户不会感知到任何变化。然后正常调用fadeOut，效果持续1秒。

我想这个解决方案很简单，因为它不需要任何额外的插件，并且可以用 1 行编写。

干杯。

//编辑：
显然现在有可能做这样的事情：

$('#myDiv').delay(800).fadeOut(1000);

Here are 一些更酷、更实用的功能。

【讨论】：

【解决方案5】：

不确定您是希望它花 5 秒还是在 5 秒后开始。

耗时5秒：可以在div上使用jQuery淡出功能，它会降低元素的不透明度，直到它为0，然后不显示该div。淡入淡出的速度是函数的参数。

要在 5 秒内启动它，您需要某种计时器，它会在文档或窗口准备好时启动，或者在 div 准备好时启动，具体取决于您想要什么。

【讨论】：

【解决方案6】：

//我用的是我刚刚写的这个暂停插件

$.fn.pause = function(duration) {
    $(this).animate({ dummy: 1 }, duration);
    return this;
};

这样称呼它：

$("#mainImage").pause(5000).fadeOut();

注意：您不需要回调。

【讨论】：

由于某种原因 pause(5000).css("opacity", .5) 在设置不透明度之前不会暂停，但它适用于淡出。有人愿意解释吗？注意：当我说“我刚刚编写的插件”时，我试图表示“未完全测试” - 但它应该适用于所要求的
css() 不使用动画队列。如果你想在改变不透明度之前暂停，你需要类似 "pause(5000).animate({ 'opacity': 0.5 });

【解决方案7】：

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

【讨论】：