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


Posted in Javascript onDecember 14, 2016

很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时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()方法对上述的动画都适用。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
Prototype使用指南之selector.js
Jan 10 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
实例解析Array和String方法
Dec 14 #Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 #Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 #Javascript
浅谈Javascript中的Label语句
Dec 14 #Javascript
详解jQuery中基本的动画方法
Dec 14 #Javascript
浅析上传头像示例及其注意事项
Dec 14 #Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 #Javascript
You might like
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
php json相关函数用法示例
2017/03/28 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python中static相关知识小结
2018/01/02 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python logging日志模块原理及操作解析
2019/10/12 Python
Pytorch 实现权重初始化
2019/12/31 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
django列表筛选功能的实现代码
2020/03/27 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
大学生就业自我鉴定
2013/10/26 职场文书
经典洗发水广告词
2014/03/13 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
作息时间调整通知
2015/04/22 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python