详解jQuery停止动画——stop()方法的使用_网络技术

详解jQuery停止动画——stop()方法的使用

发布时间 - 2026-01-10 21:49:20 点击率：次

很多时候需要停止匹配元素正在进行的动画，比如，当鼠标选入元素时显示菜单，鼠标离开时隐藏下拉菜单，如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况，此时stop()就派上用场了。

stop()方法的语法结构为：

stop([clearQueue],[gotoEnd]);

参数clearQueue和gotoEnd都是可选参数，为Boolean值（true或false）。clearQueue代表是否清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。

（1）直接使用使用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。比如下面例子：

 <!-- html部分 -->
 <div id="panel" style="width: 60px;height: 22px;background-color: #eee;">呵呵</div>

 /* js部分 */
 $("#panel").hover(function() {
  $(this).stop().animate({height: "150"}, 200);
 },function() {
  $(this).stop().animate({height: "22"}, 300);
 });

此时，在光标移入时，触发光标移入动画（在0.2秒内height变为150），在动画还没执行完的时候光标移出，则停止当前动画（可能height还未到达150），执行光标移出触发的动画（在0.3秒内height变回22）。反之亦然。

如果遇到组合动画，例如：

$("#panel").hover(function() {
  $(this).stop()
   .animate({height: "150"}, 200) //如果在此时触发了光标的移出事件
           //将执行下面的动画
   .animate({width: "300"},300); //而非光标移出事件中的动画
 },function() {
  $(this).stop()
   .animate({height: "22"}, 200)
   .animate({width: "60"},300);
 });

此时只用一个不带参数的stop()方法就显得力不从心了。因为stop()方法只会停止正在进行的动画，如果动画正执行在第1阶段（改变height的阶段），则触发光标移出事件后，只会停止当前的动画，并继续进行下面的.animate({width: "300"},300)动画，而光标移出事件中的动画要等这个动画结束后才会继续执行，这显然不是预期的结果。这种情况下stop()方法的第一个参数就发挥作用了。

（2）stop(true)，此时程序会把当前元素接下来尚未执行完的动画队列清空。所以可以把上面代码改成如此代码，就能实现预期的效果。

$("#panel").hover(function() {
  $(this).stop(true)
   .animate({height: "150"}, 200) //如果在此时触发了光标的移出事件
           //直接跳过后面的动画队列
   .animate({width: "300"},300); 
 },function() {
  $(this).stop()
   .animate({height: "22"}, 200)
   .animate({width: "60"},300);
 });

（3）第2个参数（gotoEnd）可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况，可以通过stop(false,true)这种方式来让当前动画直接到达末状态。

（4）两者结合起来stop(true,true)，即停止当前动画并直接到达当前动画的末状态，并清空动画队列。

（5）注意，jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达执行动画队列最终状态的方法。例如有一组动画：

  $("div.content")
  .animate({width: "300"}, 200)
  .animate({height: "150"}, 300)
  .animate({opacity: "0.2"}, 200);

无论怎么设置stop()方法，均无法再改变"width"或者"height"时，将此<div>元素的末状态变成300*150大小，并且设置透明度为0.2。

温馨提示：

jQuery中的动画有show()、hide()、fadeIn()、fadeOut()、slideDown()、slideUp()、animate()等等。stop()方法对上述的动画都适用。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# jquery # 停止动画 # stop()方法 # JQuery动画和停止动画实例代码 # jQuery动画animate方法使用介绍 # jQuery动画效果animate和scrollTop结合使用实例 # jquery animate 动画效果使用说明 # JQuery动画animate的stop方法使用详解 # jQuery实现切换页面过渡动画效果 # Jquery中使用show()与hide()方法动画显示和隐藏图片 # jQuery动画与特效详解 # 利用jquery制作滚动到指定位置触发动画 # jQuery动画出现连续触发、滞后反复执行的解决方法 # jQuery 动画与停止动画效果实例详解 # 移出 # 鼠标 # 正在进行 # 清空 # 只会 # 都是 # 就会 # 还没 # 第一个 # 就能 # 才会 # 可以通过 # 事件中 # 还未 # 可选 # 会把 # 将此 # 结合起来 # 而非 # 不带

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：5种Android数据存储方式汇总

下一篇：Laravel中的Facade(门面)到底是什么原理

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：5种Android数据存储方式汇总

下一篇：Laravel中的Facade(门面)到底是什么原理