单击或延迟后的jQuery淡出答案

【问题标题】：jQuery Fadeout on Click or after delay单击或延迟后的jQuery淡出
【发布时间】：2011-03-17 21:56:12
【问题描述】：

我正在网站上显示一个消息框。我希望能够让它在点击时或 X 秒后淡出。问题是delay() 函数取代了click() 函数，因此即使您单击关闭，您仍然需要等待时间。

这里是 jQuery

$(document).ready(function() {    
$(".close-green").click(function () {
        $("#message-green").fadeOut("slow");
    });

    //fade out in 5 seconds if not closed
    $("#message-green").delay(5000).fadeOut("slow");

})

我还设置了一个简单的 jsfiddle。看问题注释掉延迟线http://jsfiddle.net/BandonRandon/VRYBk/1/

【问题讨论】：

delay JQuery effects的可能重复
@swilliams 这甚至不接近同一件事。该人想知道如何延迟动画，OP 已经知道如何延迟，但想知道如果在延迟完成之前发生事件，如何防止延迟。

标签： javascript jquery

【解决方案1】：

您应该将其更改为setTimeout： http://jsfiddle.net/VRYBk/3/

（在 jsfiddle 链接中）我删除了您的延迟线并用标准的setTimeout 替换它，例如：

setTimeout(function(){
    $("#message-green").fadeOut("slow");
},5000)

作为为什么的注释，是因为 JS 是从上到下读取的，它会在您单击并触发事件之前读取您的延迟。因此，即使您单击延迟运行也会导致所有动画暂停。

【讨论】：

更新了我的答案以解释您为什么会遇到这个问题
谢谢，我认为这很简单。我也非常感谢你解释为什么！ :)

【解决方案2】：

这将是 jQuery 1.5 的新 Deferred 对象的理想用途：

// a deferred object for later processing
var def = $.Deferred();

// resolve the deferred object on click or timeout
$(".close-green").click(def.resolve);
setTimeout(def.resolve, 5000);

// however the deferred object is resolved, start the fade
def.done(function() {
    $(".message-green").fadeOut("slow");
});

http://jsfiddle.net/Nyg4y/3/ 的工作演示

请注意，如果您按下按钮，计时器仍然会触发并不重要 - 第二次调用 def.resolve() 将被忽略。

【讨论】：

谢谢，我使用的是稍旧版本的库，但如果我升级到 1.5，我现在有一些东西可以解决了。

【解决方案3】：

我发现它是 Oscar Godson 建议的最佳解决方法，我以某种方式将其添加到其中：

if (! $clicked.hasClass("search"))
{
    setTimeout(function()
    {
        jQuery("#result").delay('1500').fadeOut('2800');
    },7000);
}
});

他原来的建议很有用：

您应该将其更改为 setTimeout：http://jsfiddle.net/VRYBk/3/

（在 jsfiddle 链接中）我删除了你的延迟线，并用标准的 setTimeout 代替它：

 setTimeout(function(){
      $("#message-green").fadeOut("slow");
 },5000)

奥斯卡龙芯，

【讨论】：