javascript 单击或延迟后的 jQuery Fadeout
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5345756/
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
jQuery Fadeout on Click or after delay
提问by Brooke.
I am displaying a message box on a website. I would like to be able to have it either fadeout on click or after X seconds. The problem is that the delay()function takes the place over the click()function making it so even if you click close you still have to wait the time.
我在网站上显示一个消息框。我希望能够让它在点击时或 X 秒后淡出。问题是该delay()函数取代了click()函数，因此即使您单击关闭，您仍然需要等待时间。
Here is the jQuery
这是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");
})
I also set up a simple jsfiddle. To see the problem comment out the delay line http://jsfiddle.net/BandonRandon/VRYBk/1/
我还设置了一个简单的 jsfiddle。要查看问题注释掉延迟线http://jsfiddle.net/BandonRandon/VRYBk/1/
回答by Oscar Godson
You should change it to a setTimeout:
http://jsfiddle.net/VRYBk/3/
您应该将其更改为setTimeout：http:
//jsfiddle.net/VRYBk/3/
(in the jsfiddle link)
I removed your delay line and replaced it with a standard setTimeoutlike:
（在 jsfiddle 链接中）我删除了您的延迟线并将其替换为以下标准setTimeout：
setTimeout(function(){
$("#message-green").fadeOut("slow");
},5000)
As a note of WHY, is because JS is read top to bottom and it'll read your delay before you click and trigger the event. Therefore, even when you click the delay is being run causing all animation to pause.
作为原因的注释，是因为 JS 是从上到下读取的，它会在您单击并触发事件之前读取您的延迟。因此，即使您单击延迟，也会导致所有动画暂停。
回答by Alnitak
This would be an ideal use for jQuery 1.5's new Deferredobjects:
这将是 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");
});
Working demo at http://jsfiddle.net/Nyg4y/3/
http://jsfiddle.net/Nyg4y/3/ 上的工作演示
Note that it doesn't matter that if you press the button the timer still fires - the second call to def.resolve()is ignored.
请注意，如果您按下按钮，计时器仍然会触发并不重要 - 第二次调用将def.resolve()被忽略。
回答by Peter Manoukian
I fount it the best workaround suggested by Oscar Godson, I somehow added this to it:
我认为它是 Oscar Godson 建议的最佳解决方法，我以某种方式将其添加到其中：
if (! $clicked.hasClass("search"))
{
setTimeout(function()
{
jQuery("#result").delay('1500').fadeOut('2800');
},7000);
}
});
His original suggestion is very useful:
他原来的建议很有用：
You should change it to a setTimeout: http://jsfiddle.net/VRYBk/3/
您应该将其更改为 setTimeout：http: //jsfiddle.net/VRYBk/3/
(in the jsfiddle link) I removed your delay line and replaced it with a standard setTimeout like:
（在 jsfiddle 链接中）我删除了您的延迟线并用标准 setTimeout 替换它，例如：
setTimeout(function(){
$("#message-green").fadeOut("slow");
},5000)
By Oscar Godson,
通过奥斯卡·戈德森，
