首页 > 代码库 > 关于jquery自带动画效果的stop（）问题
关于jquery自带动画效果的stop（）问题
首先先来看一下jquery中stop（）的用法
- stop（）用于在动画执行前停止正在执行的动画
- stop（stopAll,goToEnd）的两个参数为布尔值；
- stopAll:true/false；是否停止对象接下来所有的动画；
- goToEnd:true/false;停止方式是直接将动画播放到结束位置还是停止在当前位置。
jquery中的fadeIn、fadeOut,slideDown、slideUp如果设置stop(false,false)，动画停止的位置将被记录下来，下一次动画走到上次被停止的位置就会结束。而我们需要的是下一次动画依旧能够完整执行，所以需要设置stop（true，true），将动画直接播放到结束。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <style type="text/css"> .wodejifen_box{ position:relative; width:80px; height:34px; overflow: visible; } .wodejifen{ height:34px; font-size: 12px; width:80px; line-height: 34px; border:1px solid red ; text-align: center; } .wodejifen_content{ position:absolute; width:150px; top:34px; left:0; border:1px solid black; padding:5px; display:none; } .wodejifen_content li{ border-bottom:1px solid black; line-height:20px; list-style: none; padding:0; } </style></head><body><div class="wodejifen_box"> <div class="wodejifen"> 我的积分 </div> <ul class="wodejifen_content"> <li>内容0000000</li> <li>内容1111111</li> <li>内容2222222</li> <li>内容3333333</li> </ul></div> <script type="text/javascript"> $(‘.wodejifen‘).mouseover(function(event){ $(‘.wodejifen_content‘).stop(true,true).slideDown(150); }).mouseout(function(event){ $(‘.wodejifen_content‘).stop(true,true).slideUp(150); }); </script></body></html>
关于jquery自带动画效果的stop（）问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。