详解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 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
AngularJS中的模块详解
Jan 29 Javascript
javascript RegExp 使用说明
May 21 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
vue实现商城购物车功能
Nov 27 Javascript
React实现全选功能
Aug 25 Javascript
JS实现多功能计算器
Oct 28 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
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
koa源码中promise的解读
2018/11/13 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
浅谈html5 响应式布局
2014/12/24 HTML / CSS
优秀员工自荐信范文
2013/10/05 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
《掌声》教学反思
2014/02/23 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
中秋节主持词
2014/04/02 职场文书
《长相思》听课反思
2014/04/10 职场文书
社团活动总结怎么写
2014/06/30 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
领导班子整改方案
2014/10/25 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
经营场所使用证明
2015/06/19 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript