点击或延迟后 jQuery 淡出

我正在网站上显示一个消息框。我希望能够在单击时或 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/ http://jsfiddle.net/BandonRandon/VRYBk/1/

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

（在 jsfiddle 链接中） 我删除了你的延迟线并将其替换为标准setTimeout like:

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

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