如何在jQuery中动画多个动画时多次调用回调

jQuery中动画多个动画时多次调用回调的解决方案

基础概念

在jQuery中，动画回调函数是在动画完成后执行的函数。当需要连续执行多个动画时，回调函数的处理方式会直接影响代码的执行顺序和逻辑。

问题原因

当多个动画连续执行时，如果每个动画都设置了回调函数，可能会出现回调函数被多次调用的问题。这是因为jQuery的动画队列机制和回调函数的执行时机导致的。

解决方案

方法1：使用回调链

$('#element').animate({left: '100px'}, 500, function() {
    // 第一个动画完成后的回调
    $(this).animate({top: '100px'}, 500, function() {
        // 第二个动画完成后的回调
        $(this).animate({opacity: 0.5}, 500, function() {
            // 第三个动画完成后的回调
            console.log('所有动画完成');
        });
    });
});

方法2：使用promise()和then()

$('#element')
    .animate({left: '100px'}, 500)
    .promise()
    .then(function() {
        // 第一个动画完成
        return $(this).animate({top: '100px'}, 500).promise();
    })
    .then(function() {
        // 第二个动画完成
        return $(this).animate({opacity: 0.5}, 500).promise();
    })
    .then(function() {
        // 所有动画完成
        console.log('所有动画完成');
    });

方法3：使用队列控制

$('#element')
    .queue(function(next) {
        $(this).animate({left: '100px'}, 500, next);
    })
    .queue(function(next) {
        // 第一个动画完成后的操作
        $(this).animate({top: '100px'}, 500, next);
    })
    .queue(function(next) {
        // 第二个动画完成后的操作
        $(this).animate({opacity: 0.5}, 500, next);
    })
    .queue(function() {
        // 所有动画完成
        console.log('所有动画完成');
    });

方法4：使用计数器控制

var animationCount = 0;
var totalAnimations = 3;

function checkAllComplete() {
    animationCount++;
    if (animationCount === totalAnimations) {
        console.log('所有动画完成');
    }
}

$('#element1').animate({left: '100px'}, 500, checkAllComplete);
$('#element2').animate({top: '100px'}, 500, checkAllComplete);
$('#element3').animate({opacity: 0.5}, 500, checkAllComplete);