How to make a function wait until the animation finishes?

Question

I used jQuery for a little animation work: the #photos table contains 9 photos, and I would like to increase the width and height using the animate function on hover. But while the animation works, if the user moves the mouse to another photo, it automatically starts the next animation, so it is completely confused. What should I do? My code is:

 $(function(){ $("#photos tr td img").mouseover(function(){ $(this).animate({"width":"1000px","height":"512px"},2000) }); $("#photos tr td img").mouseout(function(){ $(this).animate({"width":"100px","height":"50px"},2000) }); }); 

Answer 1

JQuery offers callbacks when the animation is complete. Then it might look like this:

 var animating = false; $(function(){ $("#photos tr td img").mouseover( function() { if(!animating) $(this).animate({"width":"1000px","height":"512px"},2000, easing, function() { animating = true; }); }); $("#photos tr td img").mouseout( function() { $(this).animate({"width":"100px","height":"50px"},2000, easing, function() { animating = false; }) }); }); 

Answer 2

You must stop any running animation before starting a new one to avoid clutter. This is probably the best and easiest solution to this particular problem.

 $(function(){ $("#photos tr td img").mouseover(function(){ $(this).stop(); $(this).animate({"width":"1000px","height":"512px"},2000) }); $("#photos tr td img").mouseout(function(){ $(this).animate({"width":"100px","height":"50px"},2000) }); }); 

Answer 3

In addition to other answers, I will consider using the hoverIntent plugin. This avoids the installation of a massive animation queue when the user types the mouse over all the photos. You really want animation if the user really freezes.

Answer 4

I guess the answer depends on what you want to accomplish on the second garbage (while the first is still animating).

1) If you want nothing to happen, you can configure your first “freezing” status for the entire TR, possibly as follows:

  $tr = $(this).closest("tr"); if ($tr.data("animating") != true) { $tr.data("animating",true); $(this) .stop(true,false) .animate({"width":"1000px","height":"512px"},2000, function(){ $tr.data("animating",false); }); } 

2) If you want the original animation to end so that your new image can be animated, you need to use .stop (), the old one with the clearQueue and goToEnd parameters set to true. This ensures that additional events in the queue (from a whole group of hangs) will not continue for several minutes, and this will cause the animation to immediately go to its final state:

  $(this).closest("tr").find("img:animated").stop(true,true); $(this).animate({"width":"1000px","height":"512px"},2000}); 

Answer 5

Always check the element's queue animation and never start conflicts:

 $(function(){ $("#photos tr td img").mouseover(function(){ if($(this).queue("fx").length == 0) $(this).animate({"width":"1000px","height":"512px"},2000) }); $("#photos tr td img").mouseout(function(){ $(this).animate({"width":"100px","height":"50px"},2000) }); });