Conflict between two jQuery effects

Question

I have this "pop-up" that shows up when some user on my website logs in/out or when he submits a form containing errors.

With jQuery I "fadeOut" it with a 5 sec delay. There is also a little cross on the top right corner of the pop-up that has been linked to the click event which triggers also a fadeOut effect but without any delay.

My problem is that I can't seem to make it work both together, but seperatly those work fine.

Please help me out, thanks!

Here are the codes:

$().ready(function() {
    $( ".msg_alerte" ).delay(5000).fadeOut();

    $('#msg_alerte_cross').click(function() {
       $( ".msg_alerte" ).fadeOut();
    });
});

And here is my "pop-up" which is in fact a simple div

<div class="msg_alerte">
    <i>Successful login</i>
    <img id="msg_alerte_cross" src="../images/close-cross.png" />
</div>

Answer 1

Of course, You can just add stop() before each fadeOut;

$( ".msg_alerte" ).delay(5000).stop().fadeOut();
$( ".msg_alerte" ).stop().fadeOut();

but I would rather use jquery :animate pseudoselector (http://api.jquery.com/animated-selector/); When automatic fade-out starts, there's no need to trigger hiding it by click.

$( ".msg_alerte" ).delay(5000).fadeOut();

$('#msg_alerte_cross').click(function() {
   $( ".msg_alerte").not(':animated').fadeOut();
});