jQuery mouseleave fast

Question

I give here a simplified case. I have 2 divs one over the other. When mouseenter the top one (blue) fadeOut and the one behind (red) fadeIn. When mouseleeve it all comes to the original situation.

It works well. The only problem comes when the user mouseleeve fast, probably when the top div (blue) is still there. How can it come to the original situation in this case?

You can check your answer here: http://jsfiddle.net/Narcis/ywTBe/

HTML:

<div id="blue"></div>
<div id="red"></div>

CSS:

#blue{
    position:absolute;
    top:100px; left:100px;
    width:100px; height:100px;
    background:blue;
    z-index:1;
}

#red{
    position:absolute;
    top:100px; left:100px;
    width:100px; height:100px;
    background:red;
    z-index:0;
}

JQUERY:

$(function () {
    $("#blue").mouseenter(function () {
        $("#blue").fadeOut("normal");
        $("#red").fadeIn();
    });

    $("#red").mouseleave(function () {
        $("#blue").fadeIn("normal");
        $("#red").fadeOut();
    });
})

Answer 1

You can make it work like this -

Html

<div id='wrapper'>
    <div id="blue"></div>
    <div id="red"></div>
</div>

Js

$(function () {
    $("#wrapper").mouseenter(function () {
        $("#blue").stop(true, true).fadeOut("normal");
        $("#red").stop(true, true).fadeIn();
    });

    $("#wrapper").mouseleave(function () {
        $("#blue").stop(true, true).fadeIn("normal");
        $("#red").stop(true, true).fadeOut();
    });
});

Demo ---> http://jsfiddle.net/ywTBe/1/

Answer 2

Here is the jsfiddle: http://jsfiddle.net/JZSRk/

        $(function(){
        $("#blue").mouseenter(function() {
            $("#blue").fadeOut("normal"); 
            $("#red").fadeIn();
        });
        $("#blue").mouseleave(function() {
            $("#blue").fadeIn("normal");
            $("#red").fadeOut();
        });
        })