详解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 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
Vue实现boradcast和dispatch的示例
Nov 13 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
需要发散思维学习PHP
2009/06/29 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python实现停车管理系统
2018/11/30 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
使用pandas读取文件的实现
2019/07/31 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
建筑安全标语
2014/06/07 职场文书
企业精神口号
2014/06/11 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
硕士学位申请报告
2015/05/15 职场文书
羊脂球读书笔记
2015/06/30 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
小学入学感言
2015/08/01 职场文书
初中体育教学随笔
2015/08/15 职场文书
英语导游欢迎词
2015/09/30 职场文书