不能fadeOut父div

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就緒前調用​​之前，您有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) 


});