什么是动画队列？怎样停止动画队列效果？

使用动画的过程中，如果在同一个元素上调用一个以上的动画方法，那么对这个元素来说，除了当前正在调用的动画，其他的动画将被放到效果队列中，这样就形成了动画队列。

动画队列中所有动画都是按照顺序执行的，默认只有当前一个动画执行完毕，才会执行后面的动画。为此，jQuery提供了stop()方法用于停止动画效果，通过此方法，可以让动画队列后面的动画提前执行。

stop()方法适用于所有的jQuery效果，包括元素的淡入淡出，以及自定义动画等。stop()方法语法如下所示。

$(selector).stop(stopAll, goToEnd);

上述语法中，stop()方法的两个参数都是可选的。其中，stopAll参数用于规定是否清除动画队列，默认是false；goToEnd参数用于规定是否立即完成当前的动画，默认是false。

由于stop()方法的参数的不同设置，会有不同的作用，下面以div元素为例，演示4种常见的使用方式。示例代码如下。

$("div").stop();        // 停止当前动画，继续下一个动画
$("div").stop(true);      // 清除div元素动画队列中的所有动画
$("div").stop(true, true);   // 停止当前动画，清除动画队列中的所有动画
$("div").stop(false, true);   // 停止当前动画，继续执行下一个动画

上述代码中，stop()方法在不传递参数时，表示立即停止当前正在执行的动画，开始执行动画队列中的下一个动画 。如果将第1个参数设置为true，那么就会删除动画队列中剩余的动画，并且永远也不会执行。如果将第2个参数设置为true，那么就会停止当前的动画，但参与动画的每一个CSS属性将被立即设置为它们的目标值。

前面在实现下拉菜单滑动效果时，如果用户频繁的操作，就会产生动画队列现象，影响用户体验，为了解决这个问题，下面通过stop()方法将代码进行改写。

$(".nav > li").hover(function () {
 $(this).children("ul").stop().slideToggle(200);
});

上述代码中，在调用slideToggle之前调用stop()方法来阻止动画队列。

jQuery自定义插件开发实践

什么是类操作？jQuery通过类名操作样式

什么是jQuery? jQuer能做什么？

传智教育HTML前端与移动开发开发高手班