Question

I have some animation code with a callback. I need a piece of code to run only after that callback has completed. I do not want to modify the animation code or callback. How can I make sure all callbacks have run before running some additional code. Should I be looking at the queue? When an animation completes but there are still callbacks pending, is that item removed from the queue? What should I be doing here?

var animateFunc = function () {
        $('#search').animate({ height: '0px', opacity: '0.0' }, 'fast', 'linear',                          function () {
            $('#search-state').val(searchContainerState.currentPage);

        });
    };

example call:

animateFunc();
someOtherFunc(); //someOtherFunc needs to run after the animation callback code.  

How do I do this correctly?
Thanks!!

Answer 1

Here:

$( '#search' ).queue( someOtherFunc );

This will add that function to the end of the effects queue, which means that it will be invoked after the existing animation operations.

Live demo: http://jsfiddle.net/BkmWg/