CODEWITHSUNDEEP
jqueryhtml
sorinu26
sorinu26

Reputation: 1172

Can't fadeOut parent div

I made a tooltip-like div where I display some messages to visitors. I also made a close button for that div. The problem is that I can't fadeOut the tooltip div when close button is pressed. Close button is located inside the tooltip div. I tryed with $(this).parent().fadeOut(300); but it's not working. If I set hide() instead of fadeOut it's working. What could be the problem?

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);
});

Upvotes: 0

Views: 167

Answers (2)

user3210959
user3210959

Reputation: 16

Hi it is because you have put a delay.

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


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


});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

It looks like because of the previous animation queue.

You have a delay of 4 seconds before fadeOut() is called on dom ready, but if you click before the 4 seconds are over the function will get added to the end of the animation queue thus will not get called immediately.

You can clear the existing queue with .stop()

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

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

Demo: Fiddle

Upvotes: 3

Related Questions