What's wrong with my JQuery?

Question

I tried this code, which worked the first time. But for some reason it didn't work after. I don't get it.

The code is as follows:

$(document).ready(function(){    
    $("#blue").mouseenter(function(){    
        $("#pink").slideDown("normal", function(){    
            $("#green").animate({width:'toggle'});
        });
    });
    $("#green").mouseleave(function(){
        $("#green").animate({width:'toggle'}, function(){
            $("#pink").slideUp();
        });
    });
});

What I'm trying to do is have one slide event for when you hover to and from the designated area. This seems to malfunction for reasons that I'm not sure.

JS Fiddle: http://jsfiddle.net/vL65X/

Answer 1

The animations get queued. Try using .stop() or .clearQueue() ...

edit: looked up the doco.

$("#blue").mouseenter(function(){
    $("#pink").stop().slideDown("normal", function(){
    $("#green").stop().animate({width:'toggle'});
        });     
    });
$("#green").mouseleave(function(){
    $("#green").stop().animate({width:'toggle'}, function(){
    $("#pink").stop().slideUp();
        });     
    });