点击或延迟后的jQuery Fadeout

Question

我正在网站上显示一个消息框。 我希望能够在点击或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/

Answer 1

你应该把它改成setTimeout ： http ： //jsfiddle.net/VRYBk/3/

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

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

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

Answer 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()的第二次调用。

Answer 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)

奥斯卡龙顿，