Animate div on hover and mouseleave with delay

Question

I have the blue div which should be animated on hover over the green div.

So if you keep the cursor on the green div long enough, the blue div expands. When you move the cursor away, the blue div goes back to it's original size.

But if you just move the mouse quickly over the green div, nothing should happen. This part of this behavior is exactly what my question is. How to solve it?

http://jsfiddle.net/H435A/

$('#c').hover(function(){
    $('#nav').delay(150).animate({'top':'-=10px', 'left':'-=10px', 'width':'+=20px', 'height':'+=20px', 'background-color':'orange'}, {duration : 200});
    }, function() {
    $('#nav').stop(true).delay(150).animate({'top':'+=0px', 'left':'+=0px', 'width':'-=0px', 'height':'-=0px', 'background-color':'blue'}, {duration : 200});
});

$('#c').mouseleave(function(){
    $('#nav').animate({'top':'+=10px', 'left':'+=10px', 'width':'-=20px', 'height':'-=20px', 'background-color':'blue'}, {duration : 100});
});

Answer 1

here you go, on the mouseleave event you just need to check if the animation has been completed or not: DEMO

var hovered=false;
$('#c').hover(function(){
    $('#nav').delay(150).animate({'top':'-=10px', 'left':'-=10px', 'width':'+=20px', 'height':'+=20px', 'background-color':'orange'}, 200,function(){
        hovered=true;
    });
    }, function() {
    $('#nav').stop(true).delay(150).animate({'top':'+=0px', 'left':'+=0px', 'width':'-=0px', 'height':'-=0px', 'background-color':'blue'},200);
});

$('#c').mouseleave(function(){
    if(hovered==true){
        hovered=false;
        $('#nav').animate({'top':'+=10px', 'left':'+=10px', 'width':'-=20px', 'height':'-=20px', 'background-color':'blue'},100);
    }
});