jquery 中stop()方法总结
来源:互联网 发布:怎样制作app软件 编辑:程序博客网 时间:2024/06/07 15:18
我们在做效果的时候有时遇到需要停止匹配元素正在进行的动画,比如,当鼠标移入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,也就是说鼠标移出后,动画还在进行,此时stop()就派上用场了。
你可以复制下面代码到你的编辑器中查看效果。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} ul,li{list-style: none;display: block;} ul{margin:100px auto;width:100px;border:1px solid #ccc;} ul li{height: 30px;overflow: hidden;background: pink;} ul li a{display:block ;text-align: center;text-decoration: none;line-height: 30px;height:30px;width:100%;} .subli p{height: 30px;line-height: 30px;background: palegreen;text-align: center;margin-bottom: 2px;} </style> <script src="../js/jquery-1.11.3.js"></script></head><body> <!--******************html******************--> <ul> <li> <a href="#">产品介绍</a> <div class="subli"> <p>111111</p> <p>222222</p> <p>333333</p> </div> </li> </ul> <!--******************js******************--> <script> $(function(){ $("li").hover( function(){ $(this).animate({ height:"121px" },500) }, function(){ $(this).animate({ height:"30px" },500) } ) }) </script></body></html>
执行以上操作你会发现当你鼠标移入移出多次,当移出鼠标时,动画还在执行。
此时你再加上stop()方法看一下效果
<script> $(function(){ $("li").hover( function(){ $(this).stop().animate({ // height:"121px" },500) }, function(){ $(this).stop().animate({ height:"30px" },500) } ) }) </script>
此时,在鼠标移入时,触发鼠标移入动画(在0.2秒内.开始下滑),在动画还没执行完的时候光标移出,则停止当前动画(可能还没有下滑至所有p都显示出来),执行鼠标移出触发的动画(在0.3秒内上滑变为初始画面)。反之亦然。
然而 当碰上组合动画执行时,这时不带参数的stop()方法就要傻眼了
$(function(){ $("li").hover( function(){ $(this).stop().animate({ height:"121px" },500).animate({ opacity:1 },500) }, function(){ $(this).stop().animate({ height:"30px" },500).animate({ opacity:0.3 },500) } ) })
因为stop()方法只会停止正在进行的动画,如果动画正执行在第1阶段(滑动阶段),则触发光标移出事件后,只会停止当前的动画,并继续进行下面的animate动画,而光标移出事件中的动画要等这个动画结束后才会继续执行,这显然不是预期的结果。这种情况下stop()方法的第一个参数就发挥作用了。
stop(true),此时程序会把当前元素接下来尚未执行完的动画队列清空。
$(function(){ $("li").hover( function(){ $(this).stop(true).animate({ height:"121px" },500).animate({ opacity:1 },500) }, function(){ $(this).stop(true).animate({ height:"30px" },500).animate({ opacity:0.3 },500) } ) })
stop(true,true),即停止当前动画并直接到达当前动画的末状态,并清空动画队列。
注意,jQuery只能设置正在执行的动画的最终状态,而没有提供直接到达执行动画队列最终状态的方法。例如有一组动画:
$("div").animate({width: "300"}, 200).animate({height: "150"}, 300).animate({opacity: "0.2"}, 200);
无论怎么设置stop()方法,均无法再改变”width”或者”height”时,将此
元素的末状态变成300*150大小,并且设置透明度为0.2。
阅读全文
0 0
- jquery 中stop()方法总结
- jquery stop()方法
- jQuery 效果 - stop() 方法
- Jquery学习之stop方法
- 关于jquery 的stop()方法
- jquery 中 stop() 的用法
- jquery中stop的使用
- jQuery中停止动画stop
- jQuery动画animate的stop方法
- jquery动画stop()方法简介
- jquery stop()方法的讲解使用
- jQuery中delay与stop的问题
- jQuery stop()
- jquery中$.each()方法总结
- jQuery中的stop()方法解决动画重叠问题
- jQuery动画animate停止方法stop使用介绍
- 【jQuery】调用stop()方法停止当前所有动画效果
- 转载:jQuery停止动画——stop()方法的使用
- Unity3d:使用C#脚本生成与解析XML
- 51Nod-1610-路径计数
- 求助,帮忙设计基于stm32的地图导航
- linux驱动链表的使用
- 手残,双硬盘(SSD+HDD)双系统(Win10+ubuntu)用easyBCD删除win10引导项怎么办?戳这里
- jquery 中stop()方法总结
- 使用Jquery Easy UI要导入的js顺序
- C++的那些事
- 随想录(内核模块的测试方法)
- LibreOJ β Round #3
- Java集合之LinkedHashMap源码解析
- websocket实现多房间聊天室
- POJ 2478 Farey Sequence & POJ 3090 Visible Lattice Points (欧拉函数)
- P1730 最小密度路径