jQuery动画出现连续触发、滞后反复执行的解决方法


Posted in Javascript onJanuary 28, 2015

本文实例讲述了jQuery动画出现连续触发、滞后反复执行的解决方法。分享给大家供大家参考。具体分析如下:

jQuery中slideUp 、slideDown、animate等动画运用时,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,其表现不雅。

则解决办法:

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

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

jquery stop:

//语法结构 

$("#div").stop();//停止当前动画,继续下一个动画 

$("#div").stop(true);//清除元素的所有动画 

$("#div").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画

$("#div").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态

这里推荐使用第二种方法:
$("#div").stop().animate({width:"100px"},100);

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
使用js实现数据格式化
Dec 03 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
Jquery 实现table样式的设定
Jan 28 #Javascript
Jquery 实现checkbox全选方法
Jan 28 #Javascript
AngularJS实现表单验证
Jan 28 #Javascript
jQuery制作简单柱状图实例
Jan 28 #Javascript
js分页工具实例
Jan 28 #Javascript
js制作简易年历完整实例
Jan 28 #Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 #Javascript
You might like
PHP数据缓存技术
2007/02/14 PHP
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
使用PHP开发留言板功能
2019/11/19 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
tensorflow 获取变量&打印权值的实例讲解
2018/06/14 Python
python绘制圆柱体的方法
2018/07/02 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python any()函数的使用方法
2019/10/28 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
工商企业管理应届生求职信
2014/05/04 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript