jQuery 停止动画

概述

动画在网页设计中非常常见，比如用于菜单的展开收起、轮播图的切换。而jQuery框架中的animate()函数是一个强大的动画功能，可以满足我们大部分的需求。但有时我们可能需要停止某个正在运行的动画，本文将介绍如何在jQuery中停止动画。

stop()方法

jQuery中提供了stop()方法，可以停止正在运行的动画效果。

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

• stopAll (可选)：Boolean类型。规定是否停止被选元素的所有动画，默认是false，只停止当前动画。
• goToEnd (可选)： Boolean类型。规定是否立即完成当前动画。

示例代码

<button>开始动画</button>
<button>停止动画</button>
<div style="width:150px;height:150px;background-color:#5f9ea0;position:relative;">
    <div style="position:absolute;width:50px;height:50px;background-color:#ffa500;">
    </div>
</div>

$("button:first").click(function(){
    $("div div").animate({left:'100px'},5000);
});

$("button:last").click(function(){
    $("div div").stop();
});

第一个按钮绑定的事件是动画效果开始，第二个按钮绑定的事件是停止动画效果。代码中通过animate()函数实现让内层div向左移动100px的动画效果。而通过stop()函数可以在动画效果正在运行时立即停止。

动画队列

jQuery中的动画效果默认是排队依次执行，也就是以队列的方式进行。我们可以通过下列代码实现动画排队（队列）的效果。

$("div div")
    .animate({left:'100px'},1000)
    .animate({top:'100px'},1000)
    .animate({left:'0px'},1000)
    .animate({top:'0px'},1000);

如果想要停止正在运行的动画效果中的某个，可以在stop()函数中传递参数来指定要停止的动画效果，如下所示。

$("div div").stop(true,false);

第一个参数为true，表示停止正在运行的所有动画效果；第二个参数为false，表示停止当前动画效果，但不执行完成事件（可理解为立即终止）。

结语

本文介绍了如何在jQuery中停止正在运行的动画效果，主要是通过使用stop()函数来实现。同时也介绍了如何停止动画队列中的某个动画效果。对于网页设计中的动画效果，停止动画效果也是非常必要的，合理的使用停止效果可以让动画效果更加细腻、符合用户的预期。