How to delay an alert?

Question

I try to postpone an alert, but I can’t get it to work, it always appears when #foo freezes and increases 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 returned to its original state ...

Answer 1

How to use 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'); }); }); 

Answer 2

You need to do this in the callback. This is the 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 .

Answer 3

Does it look like you want to use a callback for an animation function?

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

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

Answer 4

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 be delayed for 3 seconds.