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

显然不起作用，因为“index”未定义。

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

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

3 个答案: