详解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语言结构小记(一)
Sep 10 Javascript
让table变成exls的示例代码
Mar 24 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
javascript如何实现create方法
Nov 04 Javascript
创建nuxt.js项目流程图解
Mar 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中替换换行符的几种方法小结
2012/10/15 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
python中反射用法实例
2015/03/27 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python基础教程之Filter使用方法
2017/01/17 Python
在centos7中分布式部署pyspider
2017/05/03 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
外贸采购员求职的自我评价
2013/11/26 职场文书
大学生演讲稿范文
2014/01/11 职场文书
七年级英语教学反思
2014/01/15 职场文书
电子商务专业求职信
2014/03/08 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
公司奖励通知
2015/04/21 职场文书