12 动画与特效之动画回调

在上一篇文章中，我们探讨了 jQuery 中的基本动画效果，包括如何使用 .fadeIn()、.fadeOut() 和 .slideToggle() 等方法来实现简单的视觉效果。在本篇中，我们将深入了解 jQuery 中的动画回调机制，帮助我们在动画执行完成后执行特定的操作。

什么是动画回调？

动画回调是指在动画效果执行完成后触发的一个函数或操作。借助回调，我们可以在特定的动画之后，图像、元素的变换或其他操作，以创建更复杂的交互体验。

语法

对于大多数 jQuery 动画方法，我们可以通过在方法调用后传入一个函数来定义回调。

$('.element').fadeOut(1000, function() {
    // 动画完成后的操作
    alert('动画完成！');
});

在这里，fadeOut 方法会在 1000 毫秒内逐渐隐藏元素，而在动画完成后，会执行 alert 提示框的代码。

示例：链式动画与回调

让我们通过一个实际案例来演示回调的使用。我们希望在一个元素渐隐之后再让它消失并进入另一个状态。

HTML 代码

<div class="box" style="width: 100px; height: 100px; background-color: red;"></div>
<button id="start">开始动画</button>

JavaScript 代码

$(document).ready(function() {
    $('#start').click(function() {
        $('.box').fadeOut(1000, function() {
            // 动画完成后改变颜色
            $(this).css('background-color', 'blue').fadeIn(1000, function() {
                // 再次执行一个动画
                $(this).slideToggle(500);
            });
        });
    });
});

代码解析

1. 点击按钮时，红色的方块将会在 1 秒内渐隐；
2. 隐藏完成后，回调函数将执行，改变方块的背景颜色为蓝色；
3. 然后，方块将以 1 秒的时间渐显出来；
4. 最后，再次执行 slideToggle，使方块滑动来隐藏或显示。

实际应用：多个动画序列

在一些复杂的界面中，我们可能会需要多个动画有序执行。以下是一个例子，我们将实现一个点击按钮后，让多个元素依次进行动画。

HTML 代码

<div class="box" style="width: 100px; height: 100px; background-color: red; margin-bottom: 10px;"></div>
<div class="box" style="width: 100px; height: 100px; background-color: green; margin-bottom: 10px;"></div>
<div class="box" style="width: 100px; height: 100px; background-color: blue; margin-bottom: 10px;"></div>
<button id="startSequence">开始序列动画</button>

JavaScript 代码

$(document).ready(function() {
    $('#startSequence').click(function() {
        $('.box').each(function(index) {
            $(this).fadeOut(1000 + index * 500, function() {
                $(this).fadeIn(1000 + index * 500);
            });
        });
    });
});

代码解析

在这个例子中，each 方法用于遍历每个 .box 元素:

• 每个元素将会在 1000 毫秒加上索引乘以 500 毫秒的时间内逐渐消失；
• 当每个元素消失后，调用的回调函数将会再次让该元素渐显；
• 这种方式实现了元素的依次动画效果。

小结

在本篇教程中，我们学习了 jQuery 动画效果的回调机制，这使得我们能够在动画完成后执行特定的操作，从而增强用户交互体验。后续我们将讨论 jQuery 中的过渡效果，带你走向更高级的动画与特效技巧。