jquery - 如何在单击几秒钟后自动隐藏的 div 时隐藏它？

Question

我有一个div。该 div 会在 5 秒延迟后自动隐藏。但我希望用户自己可以通过在指定的 5 秒时间段过去之前单击它来隐藏它 - 就像我们在 phpmyadmin 中看到的，当发生某些操作时。我通过 fadeOut() 方法隐藏它。当 div 本身在 5 秒后隐藏时，此方法工作正常，但当单击事件发生时，fadeOut() 不起作用。如果我使用 hide() 那么它就可以工作。那么为什么我不能在点击事件上使用 fadeOut() 呢？这是我的代码 -

<script type="text/javascript">
$(document).ready(function(){
    $(".msg_wrapper").delay(5000).fadeOut(500);

    $(".msg_wrapper").click(function(){
        $(this).fadeOut(500); // does not work, but hide() works, why?
    });
});
</script>

Answer 1

编辑:使用 jQuery clearQueue [>= jQuery v1.4] 取消延迟的方法:

$(function() {
    $('.msg_wrapper').delay(5000).fadeOut(500).on('click', function () {
        $(this).clearQueue().fadeOut(500);
    });
});

JSFiddle:http://jsfiddle.net/KY7TZ/1/

或者，如果您更喜欢使用纯 Javascript 的 setTimeout 方法:

$(function() {
    var $msg = $('.msg_wrapper'),
        timeout = setTimeout(function () {
            $msg.fadeOut(500);
        }, 5000);

    $msg.click(function() {
        clearTimeout(timeout);
        $msg.fadeOut(500);
    });
});

JSFiddle:http://jsfiddle.net/KY7TZ/