专栏首页Krrybloganimate 动画滞后执行的解决方案

animate 动画滞后执行的解决方案

jQuery动画:

animate 容易出现连续触发、滞后反复执行的现象;

针对 jQuery 中 slideUp、slideDown、animate 等动画运用时出现的滞后反复执行等问题的解决方法有如下:

1、在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题(使用setTimeout)

2、在触发元素的事件时预先停止所有的动画,再执行相应的动画事件(使用stop)推荐这种。

//第二种方式 $(".container").stop();//停止当前动画,继续下一个动画 $(".container").stop(true);//清除元素的所有动画 $(".container").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画 $(".container").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态

//例如,

1 $(".container").stop().animate({
2       marginTop:"60px",
3   width:"100px",
4       height:"50px"
5 },500);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 页面性能优化

    可以看到,六个绿色条并发请求,四个灰色条等待请求,最下面三个绿色条3.4s后才触发请求

    Krry
  • Vue 路由模块化配置

    企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化

    Krry
  • vue 知识总结

    Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

    Krry
  • 「Web Animation API 专题」纯手工撸一个图片随机移动的动画

    当我们谈及网页动画时,自然联想到的是 CSS3 动画、JS 动画、SVG 动画 等技术以及 jQuery.animate() 等动画封装库,根据实际动画内容设计...

    前端达人
  • 前端课程——动画

    CSS3新增animation 属性使得仅通过CSS的样式属性实现动画效果成为可能。实现动画包括两个部分:

    Dreamy.TZK
  • javascript当中类型转换,typeof的用法

    1)类型转换,typeof的用法 例 3.1.1 <HTML> <head>     <meta http-equiv="content-type" con...

    马克java社区
  • Apache Spark 2.2.0 中文文档 - Structured Streaming 编程指南 | ApacheCN

    Structured Streaming 编程指南 概述 快速示例 Programming Model (编程模型) 基本概念 处理 Even...

    片刻
  • gps卫星信号模拟器gps信号发生器gnss信号模拟器

    SYN5203型GPS信号模拟器是由西安同步电子科技有限公司精心设计开发生产的一款低成本卫星导航授时模拟信号源,模拟GPS卫星导航定位系统的导航信号,支持GPS...

    时频专家
  • C语言学习二

    题目:打印1000以内所有数的逆序数,如123的逆序数是321,23的逆序数是32,3的逆序数是3 ​分析:首先要打印出1000以内的数,要用到定数循环,其次...

    三杯水Plus
  • C数据类型

    signed int 32bit -2^31 ~ 2^31-1 -2147483648 ~ 2147483647

    mcxfate

扫码关注云+社区

领取腾讯云代金券