照例，现在开头讲个这个问题发生的背景吧： 因为最近要做个操作选项的呼出，然后就想到了用默认隐藏，鼠标划过的时候显示的方法。 刚开始打算添加一个，直接触发mouseover（或者mouseenter）的时候add，mouseout（或者mouse ...
照例，现在开头讲个这个问题发生的背景吧：
因为最近要做个操作选项的呼出，然后就想到了用默认隐藏，鼠标划过的时候显示的方法。
刚开始打算添加一个，直接触发mouseover（或者mouseenter）的时候add，mouseout（或者mouseleave）的时候remove，这个解决方法很简单，也很实用，但是体验上可能不是那么酷炫（好吧，这个词用的，瞬间感觉好low啊），所以就想到了用animate或者slide这些jQuery的动画，然后一开始讲真，这个插件自己写，会碰到些问题，不太好实现（毕竟js掌握的不是很到位），然后听同事讲去找找jquery，导入后直接引用就可以了。
（还好我没养成一碰到要做某个特效，第一反应是网上找插件，说起这个，又想到前几天碰到的关于将table中的表头对界面滚动而固定的那个解决方法了，过几天传上来，讲真，那个方法网上找了一圈没找到合适的解决方法，最后我自己想了个方法，还是蛮有成绩感的，虽然有可能不是最优的解决方案）
回到正题，网上找了一圈，讲真，别人的插件，做的确实很赞，而且各种浏览器下的兼容性也解决了，不过我个人而言，只在两三个页面用到，而且又要导入文件（这个好像不是特别麻烦），又要用别人的，终归没什么成就感。
然后，最后还是自己动手写了，虽然花了点时间，也碰到了一些问题，不过还是不错的，问题也最后解决了，至少对几个jQuery的内置函数又熟悉了一点。
ps:最后补充一句，在我自己找出解决方案后，再次百度了一下，好吧，出来的第一个网页链接，点进去就是我所用的方法。
bug重现：原本想做个动图的，好像太麻烦了，还是上代码吧，知道这个问题的应该不用看动图也知道是个怎么样的问题；不知道这个问题的，可以先把代码拷贝下来试一下。
PS：下面以animate动画为例
<!DOCTYPE html><html lang="zh-CN"><head> <title>test</title> <meta charset="utf-8"> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css"> <script src='/images/loading.gif' data-original="./bootstrap/js/jquery-1.11/jquery.min.js"></script> <script src='/images/loading.gif' data-original="./bootstrap/js/bootstrap.min.js"></script></head><body> <div style="width:70%;margin:50px auto;height:300px;"> <div id="test" style="width:900px;height:100px;border:1px solid red;overflow:hidden;"> <div class="test" style="margin-left:-6em"> <a> 测试用的文字 <i class="fa fa-arrow-right"></i> </a> </div> </div> </div> <script> $("[data-toggle='tooltip']").tooltip(); $("#test").on("mouseover",function(){ var $this = $(this); var $thisTest = $this.find("div.test"); $thisTest.css("position","relative"); // $thisTest.stop(); $thisTest.filter(':not(:animated)').animate({marginLeft:"0em"}); }) .on("mouseout",function(){ var $this = $(this); var $thisTest = $this.find("div.test"); $thisTest.css("position","relative"); // $thisTest.stop(); $thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"}); }) //连续触发动画bug //不允许动画累积；或是在新的动画开始前，先停止当前正在进行的动画 </script></body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：关于jQuery中，animate、slide、fade等动画的连续触发、滞后反复执行的bug的个人解决办法
关键词：jquery
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
