详解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 相关文章推荐
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 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
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
Python计算程序运行时间的方法
2014/12/13 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Numpy的简单用法小结
2019/08/28 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
python excel和yaml文件的读取封装
2021/01/12 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
秋季运动会稿件
2014/01/30 职场文书
企业总经理职责
2014/02/02 职场文书
安全生产演讲稿
2014/05/09 职场文书
医德医风演讲稿
2014/05/20 职场文书
求职信模板
2014/05/23 职场文书
未婚证明格式
2015/06/15 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
选购到合适的激光打印机
2022/04/21 数码科技