25、jQuery动画与队列：功能与应用详解

jQuery动画与队列：功能与应用详解

1. jQuery动画队列机制

在jQuery中，动画是按队列顺序执行的。例如，刷新页面并清空控制台后，连续三次点击“Animate”按钮（每次点击间隔适当以避免双击），会立即向控制台发送15条消息，表明点击处理程序执行了三次，随后月亮会绕地球公转三次。这是因为jQuery会将每个动画排队，并按顺序执行，它会在每个动画元素上维护一个名为 fx 的队列。

更棒的是，jQuery允许我们创建自己的执行队列，不仅用于动画，还可用于其他目的。

2. 队列函数执行

2.1 函数入队

将动画排队以进行串行执行是函数队列的一个明显用途。下面对比两种实现方式的代码：
- 使用队列 ：

var $moonImage = $('img[alt="moon"]');
$moonImage.animate({left: '+=256'}, 2500);
$moonImage.animate({top: '+=256'}, 2500);
$moonImage.animate({left: '-=256'}, 2500);
$moonImage.animate({top: '-=256'}, 2500);

• 使用完成回调 ：

var $moonImage = $('i