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

how to determine last element being animated

本文关键字：元素 动画 最后一个 何确定      更新时间：2023-09-26

我正在使用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"没有定义

尝试使用延迟对象:

$('.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+

您可以使用闭包，像这样:

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

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);
    }
});
相关文章：