jQuery停止动画——stop()方法的使用
很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时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;border: 1px solid #abcdef;font-size: 12px;">呵呵</div> <!-- 引入jquery库 -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>/* 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"}, 5000) //如果在此时触发了光标的移出事件//将执行下面的动画.animate({borderWidth: "20px"},3000); //而非光标移出事件中的动画
},function() {$(this).stop().animate({width: "300"}, 2000).animate({fontSize: "24px"},3000);
});
此时只用一个不带参数的stop()方法就显得力不从心了。因为stop()方法只会停止正在进行的动画,如果动画正执行在第1阶段(改变height的阶段),则触发光标移出事件后,只会停止当前的动画,并继续进行下面的.animate({borderWidth: “20px”},3000)动画,而光标移出事件中的动画要等这个动画结束后才会继续执行,这显然不是预期的结果。这种情况下stop()方法的第一个参数就发挥作用了。
(2)stop(true),此时程序会把当前元素接下来尚未执行完的动画队列清空。所以可以把上面代码改成如此代码,就能实现预期的效果。
$("#panel").hover(function() {$(this).stop(true).animate({height: "150"}, 5000) //如果在此时触发了光标的移出事件//直接跳过后面的动画队列.animate({borderWidth: "20px"},3000);
},function() {$(this).stop(true).animate({width: "300"}, 2000).animate({fontSize: "24px"},3000);
});
(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"时,将此
温馨提示:
jQuery中的动画有show()、hide()、fadeIn()、fadeOut()、slideDown()、slideUp()、animate()等等。stop()方法对上述的动画都适用。
jQuery停止动画——stop()方法的使用相关推荐
- 转载:jQuery停止动画——stop()方法的使用
jQuery停止动画--stop()方法的使用 转载地址 很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标 ...
- jQuery 停止动画
http://www.runoob.com/jquery/jquery-stop.html jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 实例 jQu ...
- jQuery动画(jQuery预制动画,jQuery自定义动画,jQuery停止动画和延迟动画)
目录 jQuery预制动画 显示隐藏动画 上拉下拉动画(高度动画) 淡入淡出动画(透明度动画) jQuery自定义动画 jQuery停止动画和延迟动画等 jQuery预制动画 jquery的预制动画 ...
- jquery 停止动画_jQuery停止动画
jquery 停止动画 We can use jQuery stop() function to stop the currently running animation on the matched ...
- jQuery停止动画效果
stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法: 参数: stopAll:可选,规定是否应该清除动 ...
- jQuery停止动画
stop() 停止动画或效果,在它们完成之前 适用于所有jQuery效果函数,包括滑动.淡入淡出和自定义动画 $("#stop").click(function(){$(" ...
- jQuery 效果 - 动画 animate() 方法
我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...
- jquery停止动画排队stop
stop方法必须写在动画和效果前面 如以下案例书写方式一样:
- jquery 停止事件冒泡方法
2种方法: View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- jquery自定义动画animate方法
示例效果: 示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
最新文章
- 过去一周AI领域有哪些新鲜事?看这一篇就够了
- 16.6 创建测试数据
- mysql 5.7.15 union order by 子查询排序不生效
- Spring Boot 2.0与Java 9
- 自称迪拜十星级酒店,震撼了!
- 技能的切实掌握 必须动手
- java基础知识点(3)——标识符常量变量
- 一小时入门proteus使用教程
- 熊拍拍是什么?熊拍拍是下一个风口吗?
- html样式在ie显示不全,IE下css常见问题总结及解决
- c语言中如何识别空格键,在C++中如何判断“空格”键输入?
- 怎么把图片格式转换成PDF呢?
- UIpath2021.10下载、安装、激活
- Titanic练习 特征分析与选择
- 嵌入式和移动深度学习研究
- 2020知道python答案_2020知道智慧树Python程序设计答案
- 泽塔云在2022年Gartner中国区超融合市场竞争报告中被评为优秀厂商代表
- sqlserver 认证多少钱_SQLServer认证
- 文梳理世界11国家和地区ICO政策:监管趋严,展现定义证券倾向
- JVM-对象什么时候进入老年代(实战篇)
热门文章
- python机构换手率_46只业绩翻倍+机构重仓芯片潜力股(名单)一览,换手率大于10...
- 在APPLE从创建ID到申请发布AppStore账户(六)新建AppleID用户首次使用要求双重认证(您的 Apple ID 需要更新)
- 使用Java实现给QQ邮箱发送验证码
- 如何创建管道——pipe
- 高中数学学习技巧,这几步你都做到了吗?
- 【期末不挂科 数据结构】第一章 绪论
- 电脑找回,怎么找回电脑上删除的文件_怎么找回电脑删除的文件-win7之家
- ONNX转ms后,benchmark跑分非常慢
- 01 计算机网络概念
- android ndk 怎样调用第三方的so库文件。