Question

我制作了一个类似工具提示的div，我向访问者显示了一些消息。我也为那个div做了一个关闭按钮。问题是按下关闭按钮时我不能fadeOut工具提示div。关闭按钮位于工具提示div内。我尝试使用$(this).parent().fadeOut(300);，但它不起作用。如果我设置hide()而不是fadeOut它正在运行。可能是什么问题？

HTML

<div class="msg_1" id="msg-1">
<div class="msg_type_1"></div>
<div class="msg_text">Changes saved</div>
<div class="msg_close"></div>
</div>

的jQuery

// Show message
$('#msg-1').fadeIn(600).delay(4000).fadeOut(600);

// Close messages
$('.msg_close').click(function() {
$(this).parent().fadeOut(300);
});

Answer 1

看起来是因为上一个动画队列。

在准备好dom之前调用fadeOut()之前有4秒的延迟，但是如果你在4秒结束之前点击该功能将被添加到动画队列的末尾，因此不会立即调用

您可以使用.stop()

清除现有队列

// Show message
$('#msg-1').fadeIn(600).delay(4000).fadeOut(600);

// Close messages
$('.msg_close').click(function() {
$(this).parent().stop(true, true).fadeOut(300);
});

演示：Fiddle

Answer 2

嗨，这是因为你拖延了。

$(document).ready(function() {  
     $('#msg-1').hide().fadeIn(600);
    $(".msg_close").click(function () {
        $(this).parent().fadeOut(300);
    });


    setTimeout(function(){
        $(".msg_close").parent().fadeOut(600);
    },4000)


});

不能fadeOut父div

2 个答案: