Question

As you may know, if you chain jQuery animations together using the “complete” parameter, each animation happens in succession only after the previous is complete.

I have a chain, like this:

$('#foobar').load(url, function(){
    $(this).fadeIn(time, function(){
        $(this).scrollTop(position, time, function() {
            $(this).css({'color':'#58e'})
        });
    });
});

This chain will execute something like this: first load content, then fade in, then scroll to the top, then finally change the css color.

What I want is this: first load the content, then fade in and scroll to the top at the same time, then finally change the color after fadeIn and scrollTop are both done.

Let’s say the scrollTop animation takes twice as long than the fadeIn animation. What simple piece of code would I add to my code so that the scrollTop callback in fadeIn DOESN’T wait for the fadeIn animation to complete. The css() animation will wait for the scrollTop animation to complete, like normal.

So the only change (whatever it might be) would affect the callback within fadeIn where scrollTop is called. I’m guessing it might have to do with manipulating the queue?

Thanks for the help!

EDIT: Here’s the solution as hinted by Andrew:

First, my original code which loads each custom function in order:

show_loader(0, function() {
    close_box($target_close, '/', '#' + $target_close.attr('id') + ' .post_wrap', function() {
        open_box($target_open, event.value, '.wide-col', function() {
            hide_loader(function() {
                scroll_to_content($target_open);
            });
            $target_close = $target_open;
        });
    });
});

Now I want close_box and open_box to execute asynchronously (at the same time), so I changed it to this:

show_loader(0, function() {
    close_box($target_close, '/', '#' + $target_close.attr('id') + ' .post_wrap');
    open_box($target_open, event.value, '.wide-col', function() {
        hide_loader(function() {
            scroll_to_content($target_open);
        });
        $target_close = $target_open;
    });
});

Now close_box and open_box animations happen at the “same time”.

Answer 1

Move the code that animates scrollTop outside of the callback to the fadeIn function:

$('#foobar').load(url, function() {
    $(this).fadeIn(time);            
    $(this).scrollTop(position, time, function() {
        $(this).css({'color':'#58e'});
    });
});