Question

I’m using jQuery’s animate function to animate a series of matching elements, but I want to determine when the last matching element has finished animating before calling a new function. How would I do this? Is there a way to do it without the .each() function?

This is my code:

Using Each Function:

var imageLen = $('.option_image').length -1; //Determine index of total images

    $('.option_image').each(function(index){
        var imageDelay = index*delayTime;

        $(this).delay(imageDelay).animate({ 'backgroundPositionY' : '0px', 'opacity' : '1'},fadeTime,function(){
            $('.option_title').css('opacity','1');

            if (index == imageLen){
                //If all have been iterated through - perform this function
            }
        })
    });

But what I want to do is:

$('.option_image').animate({ 'backgroundPositionY' : '0px', 'opacity' : '1'},fadeTime,function(){
    if (index == imageLen){
        $('.option_title').css('opacity','1');
        $('#back').fadeTo(fadeTime,1);
        $('#restart').fadeTo(fadeTime,1);
    }
});

which obviously doesn’t work because “index” is not defined.

Answer 1

Try using a deferred object:

$('.option_image').animate({
    'backgroundPositionY': '0px',
    'opacity': '1'
}, fadeTime).promise().done(function() {
    $('.option_title').css('opacity', '1');
    $('#back').fadeTo(fadeTime, 1);
    $('#restart').fadeTo(fadeTime, 1);
});

This requires jQuery 1.6+