jQuery动画出现连续触发、滞后反复执行的解决方法
本文实例讲述了jQuery动画出现连续触发、滞后反复执行的解决方法。分享给大家供大家参考。具体分析如下:
jQuery中slideUp 、slideDown、animate等动画运用时,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,其表现不雅。
则解决办法:
1、在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题(使用setTimeout)
2、在触发元素的事件时预先停止所有的动画,再执行相应的动画事件(使用stop)
//语法结构
$("#div").stop();//停止当前动画,继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态
这里推荐使用第二种方法:
$("#div").stop().animate({width:"100px"},100);
希望本文所述对大家的jQuery程序设计有所帮助。
相关推荐
-
JQuery动画和停止动画实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-
-
JQuery动画animate的stop方法使用详解
animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="stylesheet" href="css
-
jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法.分享给大家供大家参考之用.具体方法如下: 1.自制折叠内容块 内容块如下: <div class="module"> <div class="caption"> <span>标题</span> <img src="rollup.gif" alt="rollup" title="rolls up this mo
-
jquery实现图片列表鼠标移入微动
本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原. 其中的jQuery事件使用mouseenter 和 mouseleave ,事件绑定方法使用新推荐的on方法. 代码如下: <!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width, initial-scale=1" /> <ti
-
jQuery动画效果animate和scrollTop结合使用实例
CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 复制代码 代码如下: $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 上面的代码表示滚动条跳到0的位置,页面移动速度是800.结合scrollTop实用示例: 复制代码
-
jQuery动画animate方法使用介绍
复制代码 代码如下: $(function() { $("#left").click(function(){ $(".block").show(); $(".block").animate({ width: "+200px", height: "+200px", fontSize: "1em", borderWidth: 10 }, "slow","swin
-
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
复制代码 代码如下: <html> <head> <meta charset="utf-8"/> <style> *{ margin:0; padding:0;} body{font-size:15px;} #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;} .head{ background:#999; padding:5px; c
-
jQuery动画效果-slideUp slideDown上下滑动示例代码
复制代码 代码如下: [code] <html> <head> <meta charset="utf-8"/> <style> *{ margin:0; padding:0;} body{font-size:15px;} #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;} .head{ background:#999; padding
-
利用jquery动画特效和css打造的侧边弹出垂直导航
这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个.下面是效果截图: HTML源码: 复制代码 代码如下: <title>Jquery+CSS侧边弹出垂直导航</title> <style type="text/css"> html, body, ul, li { margin: 0; padding: 0; border: 0; outline:
-
jQuery学习笔记之jQuery动画效果
基本动画代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><title>Hello World jQuery!</title><script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type=&quo
随机推荐
- Erlang中的基本元素操作小结
- Mootools 1.2教程 正则表达式
- C#开发之微信小程序发送模板消息功能
- mongoose设置unique不生效问题的解决及如何移除unique的限制
- Python类的基础入门知识
- SQLserver2008使用表达式递归查询
- Android实现手势滑动识别功能
- Java开发学习 Java数组操作工具
- xmlplus组件设计系列之选项卡(Tabbar)(5)
- ASP.NET 程序中删除文件夹导致session失效问题的解决办法分享
- Android中用Bmob实现短信验证码功能的方法详解
- javascript与asp.net(c#)互相调用方法
- 文本框栏目介绍
- WPF MVVM示例讲解
- Jquery选择子控件"大于号"和" "区别介绍及使用示例
- Java中equals()方法重写实现代码
- asp 取文本框名称代码
- 基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
- 常见的网上邻居访问问题精解
- 详解路由器和交换机的区别