SlideDown Div with Close link

Greetins,

I wanna use a sliding DIV for displaying some messages like "Profile Updated".

This is my code. The DIV slides down when i load the page and dissapers after a few seconds (the delay). But I want to be able to Close the DIV before the timeout with a link, but I cant attach SlideUp to it... Why?

    $("#message").hide();

     $("#message").slideToggle('slow', function() {
        $(this).delay(2000).slideToggle("slow");
     });

    $("#close").click(function() {
        $("#message").slideUp();
    });  
    });

    <div id="message" style="display:none; border: 3px solid #ccc; width: 500px; height: 30px; background: #eee;">
    A message goes h开发者_运维问答ere! <a id="close" href="#" style="float: right;">Close div</a>
    </div>

Try adding a .stop() to your close div click event.

$("#close").click(function() {
    $("#message").stop().slideUp();
});

jsfiddle example

That's because animations are queued in jQuery. The slideUp effect will only be run after the delayed slideToggle effect completes, and your <div> element will be hidden by then.

You need to call stop() to cancel the the delay, as @Mark suggests, but you might want to pass true in its first argument:

$("#close").click(function() {
    $("#message").stop(true).slideUp("slow");
});

That way, all the effects queued on the <div> element will be cleared, not only the one that's currently running.