How can I make a function wait until an animation completes?

animation, jquery, jquery-animate

Solution

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

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; }) 
        });
});

Problem

I have used JQuery for a small animation work: a table `#photos` contains 9 photos and I would like to increase the width and height using the `animate` function on mouseover. But while the animation is running if the user moves to mouse to another photo it automatically triggers the next animation, so it's totally 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) }); }); ```

Original source