jquery - 如何确定最后一个动画元素

Question

我正在使用 jQuery 的 animate 函数对一系列匹配元素进行动画处理，但我想在调用新函数之前确定最后一个匹配元素何时完成动画处理。我该怎么做？有没有办法在没有 .each() 函数的情况下做到这一点？

这是我的代码：

使用每个函数：

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

但我想做的是：

$('.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);
    }
});

这显然不起作用，因为“索引”未定义。

Answer 1

尝试使用延迟对象：

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

这需要 jQuery 1.6+

Answer 2

您可以使用闭包，如下所示：

var index = 0;
var length = elements.length - 1;
elements.animate(properties, speed, function() {
    if (index == length) {
        doSomeStuff();
    } else index++;
});

Answer 3

jQuery 动画被添加到队列中。您可以在完整回调中测试队列的大小。我认为这会起作用：

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