教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

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

更新时间:2021年07月19日16时03分 来源:传智教育 浏览次数:

好口碑IT培训

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

动画队列中所有动画都是按照顺序执行的,默认只有当前一个动画执行完毕,才会执行后面的动画。为此,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前端与移动开发开发高手班

0 分享到:
和我们在线交谈!