位置: 编程技术 - 正文

分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug(关于jquery的用途)

编辑:rootadmin

推荐整理分享分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug(关于jquery的用途),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:关于jquery,关于jquery的说法中错误的是,关于jquery的说法中错误的是,关于jquery的用途,jquery有哪些,jquery有哪些,jquery例子,关于jquery,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

刚开始打算添加一个class="active",直接触发mouseover(或者mouseenter)的时候add,mouseout(或者mouseleave)的时候remove,这个解决方法很简单,也很实用,但是体验上可能不是那么酷炫(好吧,这个词用的,瞬间感觉好low啊),所以就想到了用animate或者slide这些jQuery的动画,然后一开始讲真,这个插件自己写,会碰到些问题,不太好实现(毕竟js掌握的不是很到位),然后听同事讲去找找jquery,导入后直接引用就可以了。

(还好我没养成一碰到要做某个特效,第一反应是网上找插件,说起这个,又想到前几天碰到的关于将table中的表头对界面滚动而固定的那个解决方法了,过几天传上来,讲真,那个方法网上找了一圈没找到合适的解决方法,最后我自己想了个方法,还是蛮有成绩感的,虽然有可能不是最优的解决方案)

回到正题,网上找了一圈,讲真,别人的插件,做的确实很赞,而且各种浏览器下的兼容性也解决了,不过我个人而言,只在两三个页面用到,而且又要导入文件(这个好像不是特别麻烦),又要用别人的,终归没什么成就感。

然后,最后还是自己动手写了,虽然花了点时间,也碰到了一些问题,不过还是不错的,问题也最后解决了,至少对几个jQuery的内置函数又熟悉了一点。

ps:最后补充一句,在我自己找出解决方案后,再次百度了一下,好吧,出来的第一个网页链接,点进去就是我所用的方法。

bug重现:原本想做个动图的,好像太麻烦了,还是上代码吧,知道这个问题的应该不用看动图也知道是个怎么样的问题;不知道这个问题的,可以先把代码拷贝下来试一下。

PS:下面以animate动画为例

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

分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug(关于jquery的用途)

最开始,

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

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

【filter】

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

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

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

【stop】

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

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

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

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

jQuery实现的调整表格行tr上下顺序 表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能。代码实例如下:!DOCTYPEhtmlhtmlheadme

jquery在ie7下选择器的问题导致append失效的解决方法 1,有如下这样一段htmldivclass="right"id="pending"tableclass="one"width="%"border="0"cellspacing="0"cellpadding="0"tbody/tbody/tabledivid="pendingpage"class="paging"/div/div2,我用jquery

jQuery 移动端artEditor富文本编辑器 由于手机上打字比较慢,并不适合长篇大论的文章,所以移动端的富文本编辑器很少。artEditor是一款基于jQuery的移动端富文本编辑器,支持插入图片,

标签: 关于jquery的用途

本文链接地址:https://www.jiuchutong.com/biancheng/379285.html 转载请保留说明!

上一篇:jquery调整表格行tr上下顺序实例讲解(jquery设置宽高)

下一篇:jQuery实现的调整表格行tr上下顺序(jquery怎么设置宽度)

  • 代扣代缴个人所得税如何做账
  • 个人劳务报酬所得税率表
  • 原值和净值在报表怎么找
  • 开票资料需要哪些内容
  • 劳务公司临时工工资需要申报吗
  • 发票丢了还能再开么
  • 企业统计报表怎么写
  • 增值税免退税计算方法
  • 公司冲账发票做不够该如何处理合适?
  • 出口退税退的是哪部分税
  • 企业应纳税所得额计算例题
  • 机动车发票有几联
  • 开发票回款是什么意思
  • 大宗物资吧
  • 企业开增值税普通发票 电子版
  • 个税免缴款
  • 核定征收的个税怎么算
  • qq画画图片大全
  • 加速折旧法和直线折旧法的区别
  • 除了电脑杀毒软件还有啥
  • 搜索特定
  • win11任务管理器怎样调出
  • 销售已使用过的固定资产增值税税率
  • 小规模纳税人冲红发票怎么报税
  • 将款项汇往外地采购专用账户会计分录
  • 跨年度坏账准备转回账务处理
  • 简单了解航天员的生活
  • 收到无法支付的押金收入
  • zendframework3中文手册
  • 定额发票累计领用金额怎么填
  • 开发成本属于什么类型科目
  • Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3项目(组件、图标等按需引入)[保姆级]
  • php邮箱smtp发信源码
  • 没有校验码的发票可以报销吗
  • 计提增值税依据
  • 多付款退回怎样写说明
  • 基于vue的开源甘特图控件
  • mongodb操作数据库
  • 单位银行提取大额现金最多能取多少
  • mysql同步复制搭建方法指南详细步骤
  • 独资企业的税收政策
  • 会计报表编制基本要求
  • 如何理解合并报表编制程序中的调整与抵消处理
  • 电脑入账如何做凭证
  • 固定资产清理残料收入
  • 开发成本的会计科目编码
  • 工会经费在哪儿申报
  • 小微企业免税额度是多少
  • 公司借款给个人400万合法吗
  • 备用金被盗刷了怎么办
  • 应收账款确认无法收回,确认为坏账损失
  • 出口退税进项税都抵扣了怎么办
  • 代账公司帮客户开发票
  • 主营业务收入转入什么科目
  • 自然人可以申请一般纳税人吗
  • 购进货物用于集体福利会计分录
  • 金税盘离线开票时间超限的处理方法
  • 个人所得税专项扣除需要交钱吗
  • sqlserver日志清理
  • mysql压缩包安装教程8.0.20
  • 怎么彻底卸载visual
  • fedora系统
  • WinCinemaMgr.exe - WinCinemaMgr是什么进程
  • mac如何恢复已删除文件
  • PHP time_nanosleep() 函数使用介绍
  • 安装win7系统后进不了系统
  • win10地图不显示
  • node.js批量添加数据
  • 编写批处理
  • android仿qq聊天
  • jquery easy ui
  • fastdwg插件
  • js使用类
  • 国家税务局太原税务局官网
  • 成本费用总额在报表哪里看
  • 教育培训行业的发展
  • 陕西省税务电话是多少
  • 计财科科长是什么级别
  • 累计计税金额是怎么得出
  • 个人所得税法全文完整版2023个人工薪规定
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设