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 [＆gt; = 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/

如何在点击它时隐藏div，它已经在几秒钟后自动隐藏了？

1 个答案: