点击或延迟后的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()忽略第二次调用.