Why can't I use slideUp() for two different events for the same element?

Question

I have this session message:

<div class="alert alert-success session-message text-center">
    Hi
    <a href="#" class="pull-right close-message">&times;</a>
</div>

And I have this jQuery code:

$(function(){
    $('.close-message').click(function(){
        $('.session-message').slideUp();
    });
    $('.session-message').delay(2000).slideUp();
});

As this code stands, when I click the × button, the message does not slideUp. However, if I comment out the delay part, clicking on the × does what I want it to do:

$(function(){
    $('.close-message').click(function(){
        $('.session-message').slideUp();
    });
    // $('.session-message').delay(2000).slideUp();
});

Furthermore, if I change the click animation from slideUp() to anything else, like fadeOut(), it still doesn't work. But if I change it to something like hide(), it does work.

What am I doing wrong? What can I do so that I can click to slideUp() the message or just wait for it to slideUp() after 2 seconds?

Answer 1

You should use .stop() because you have registered animation queue for the element on DOM ready.

$(function(){
   $('.close-message').click(function(){
        // without the .stop(), it will wait until the first animation in queue is done
        $('.session-message').stop().slideUp();
   });

   // registered animation queue for the element on DOM ready:
   $('.session-message').delay(2000).slideUp();
});

$('.close-message').click(function(){
  $('.session-message').stop().slideUp();
});

$('.session-message').delay(2000).slideUp();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="alert alert-success session-message text-center">
    Hi
    <a href="#" class="pull-right close-message">&times;</a>
</div>

---

(...) But if I change it to something like hide(), it does work

Because .hide() is not an animation and therefore it's not in the animations queue.