How to delay an alert?

I'm trying to delay an alert but can't get it to work, it always pops up when #foo is hovered over and is increasing in size:

$('#foo').hover(function() {
 $(this).animate({width :'400px'}, 'slow');
},
function() {
 $(this).delay(2000).animate({width :'40px'}, 'slow');
alert('Im an alert message');
});

but I want it to show only after #开发者_如何学编程foo has decreased back to original state ...

How about Using a callback ??

$('#foo').hover(function () {
    $(this).animate({
        width: '400px'
    }, 'slow');
}, function () {
    $(this).delay(2000).animate({
        width: '40px'
    }, 'slow', function () { //callback function, which runs very next to .animate()
        alert('Im an alert message');
    });
});

You need to do this in a callback. This is a function that will be called when the animation is complete:

$(this).delay(2000).animate({width :'40px'}, 'slow', function(){
    alert("I'm an alert message");
});

See the animate API.

it looks like you want to use a callback on the animate function?

http://api.jquery.com/animate/

$(this).delay(2000).animate({width :'40px'}, 
    'slow',
    function () {
        alert('Im an alert message');
    }
);

Use the setTimeout function: http://www.w3schools.com/js/js_timing.asp

$('#foo').hover(function() {
 setTimeout(function(){$(this).animate({width :'400px'}, 'slow');}, 3000);
}

The above code should delay for 3 seconds.