我写文章的风格就是喜欢在开头讲问题法伤的背景:

因为最近要做个操作选项的呼出,然后就想到了用默认隐藏,鼠标划过的时候显示的方法。

刚开始打算添加一个class="active",直接触发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="/UploadFiles/2021-04-02/jquery.min.js">

上面这份代码,stop()这个方法被我注释掉了,是我个人认为最完美的解决方法,没有被注释掉的,是我后来百度了一下后,别人提到的另一种解决方案,但我个人感觉不是特别完美,至于差别我在后面提。

最开始,

$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});

这两句代码,是没有filter()函数的,也就是最开始碰到这个bug的时候的代码的样子。

这个bug产生原因就是事件在短时间内(上一个动画未播放完),动画累积导致的(估计碰到这个问题的,回过头去看看代码都知道这个原因)。所以,解决的方法,有两个。

【filter】

一个就是用filter过滤,在动画发生前,过滤掉正在进行动画的元素,只让上一个动画已经结束的元素才能触发新的事件。

然后这就带来一个新问题了,当我把鼠标移至对应的内容上,mouseover事件触发,这个时候,在动画还未结束的时候,我再将鼠标移除对应内容区域外,mouseleave事件触发,但是因为上一个动画还未结束,所以即使触发了该事件,但预期的函数并未执行,此时预期中的“mouseleave事件触发,内容隐藏”结果便无法做到了。

当然,如果操作者在mouseover事件触发的动画结束前,鼠标一直停在对应内容上,这个方案并不会有影响。

【stop】

对于stop(),虽然知道这是大家都了解的,还是再搬一遍吧。

//语法结构
$("#div").stop();//停止当前动画,继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态

这个方案的思路,就是简单的:当我mouseover的时候,触发对应的动画,但是在动画还未结束的时候,我却要mouseleave,同时触发mouseleave对应的动画,这个时候我便需要停止对应元素正在进行的动画。然后,这个bug也就不存在了。

最后,好吧,这篇随笔好像也没啥总结的,其实就是对animate、slide、fade动画函数的熟悉吧,同时再熟悉一下stop有参数无参数的区别(讲真,刚开始没想到用stop,过了一两天后,偶然看到API的时候,看到了stop,才突然有了用stop解决这个bug的设想)。

以上所述是小编给大家分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug,希望对大家今后的工作学习有所帮助。

标签:
jquery_animate,animate_fadein,slidefade

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。