jQuery动画的hover连续触发动画bug处理
一、问题
为元素设置hover上实现动画的效果,当鼠标反复快速进入元素时,动画会在鼠标停止后依然执行,导致动画和鼠标的动作不一致。
二、解决方法
要解决这种问题,可以使用jquery的stop()方法。
stop([clearQueue],[gotoEnd]):
有两个参数:
第一个参数[clearQueue]: 决定是否清除队列,设置为true,则清空队列,立即结束动画;
第二个参数[gotoEnd]: 决定当前正在执行的动画是否立即完成,设置为true,则完成队列,立即完成动画。
三、代码
源代码:
$(".layer").hover(function(){
$(this).animate({left:0},500);
},function(){
$(this).animate({left:-100},500);
});
如果快速重复把鼠标移入移出该元素,就会产生"动画积累",鼠标停止移动后,积累的动画还会继续执行,直到执行完毕。
解决后的代码如下:
$(".layer").hover(function(){
$(this).stop(true).animate({left:0},500);
},function(){
$(this).stop(true).animate({left:-100},500);
});
也可以将第二个参数设置为true,让动画达到最后状态。 $(this).stop(false,true).animate({left:0},500);
jQuery动画的hover连续触发动画bug处理的更多相关文章
- 关于jQuery中,animate、slide、fade等动画的连续触发、滞后反复执行的bug的个人解决办法
照例,现在开头讲个这个问题发生的背景吧: 因为最近要做个操作选项的呼出,然后就想到了用默认隐藏,鼠标划过的时候显示的方法. 刚开始打算添加一个class="active",直接触发 ...
- 【转载】jQuery动画连续触发、滞后反复执行解决办法
转载: http://www.cnblogs.com/yuejin/archive/2012/12/18/2822595.html jQuery中slideUp .slideDown.animate等 ...
- jQuery动画连续触发、滞后反复执行解决办法
jQuery中slideUp .slideDown.animate等动画运用时,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,其表现不雅. 则解决办法: 1 ...
- 移动端:active,:hover无法很好触发动画的解决方案
移动端:active,:hover无法很好触发动画的解决方案 1:问题环境: 用css3定义了一个动画,使用:hover伪类调用动画时在移动端不能很好的进行动画. 2:解决方案: 定义一个open类, ...
- 利用jquery制作滚动到指定位置触发动画
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...
- jQuery源码分析系列(39) : 动画队列
data函数在jQuery中只有短短的300行代码,非常不起点 ,剖析源码的时候你会发现jQuery只要在有需要保存数据的地方无时无刻不依赖这个基础设施 动画会调用队列,队列会调用data数据接口还保 ...
- jQuery停止动画和判断是否处于动画状态
1.停止元素的动画 stop([clearQueue][,gotoEnd]); 参数clearQHCHC和gotoEnd都足町选的参数,为Boolean值(ture或flase).clearQueue ...
- jQuery如何停止元素的animate动画,还有怎样判断是否处于动画状态
jquery的animation会自动进入队列,就出现了一个问题,这些动画会一一执行完成,而我们实际的本意是当鼠标移开的时候动画即终止. 停止元素的动画方法:stop()语法结构:stop([clea ...
- jQuery鼠标悬停3d菜单展开动画
效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现 ...
随机推荐
- 漫谈 Clustering (番外篇): Vector Quantization
在接下去说其他的聚类算法之前,让我们先插进来说一说一个有点跑题的东西:Vector Quantization.这项技术广泛地用在信号处理以及数据压缩等领域.事实上,在 JPEG 和 MPEG-4 等多 ...
- 两种简单的servlet实现反向代理
以下两种方法都需要引入jar包: <dependency> <groupId>org.mitre.dsmiley.httpproxy</groupId> <a ...
- fstatfs/statfs详解
[fstatfs/statfs系统调用] 功能描述: 查询文件系统相关的信息. 用法: #include <sys/vfs.h> /* 或者 <sy ...
- npm 常用指令 使用指令删除 node_modules 包
查看 npm 命令 npm help 全局命令参数 -g npm install -g 安装全局 npm uninstall -g 卸载全局 全局node包中 i5ting_toc 这个包可以把md文 ...
- Uva 派 (Pie,NWERC 2006,LA 3635)
依然是一道二分查找 #include<iostream> #include<cstdio> #include<cmath> using namespace std; ...
- Cisco交换机与路由器命令总结
1.查看信息 show version 查看版本及引导信息 show running-config 查看运行设置 show startup-config 查看开机设置 show ...
- 关于mybatis callSettersOnNulls 配置
今天做了一件坑了自己的事情,为此浪费了好多时间... 在mybatis的设置中,看到了这样的一行设置.出于程序员的好奇,去搜索了一下,这条设置是干什么的. <setting name=" ...
- linux磁盘满了怎么办??删掉无用的大文件
今天公司网站突然无法访问,因为之前遇到过是因为磁盘问题,所以使用 df 命令查看结果,结果果然是有100%的东西,那么怎么解决呢,我们想到得查找大文件,并删掉无用的大文件比如log 那么linux如何 ...
- 简述在php中 = 、==、 === 的区别(简述在php中 等于 、双等于、 三等于 的区别)
= 是赋值:就是说给一个变量赋值 == 是轻量级的比较运算,只看值不看类型 === 是重量级的比较运算,既看值,也看类型,要绝对相等才会为true
- 读书笔记3(Teamwork)
今天我阅读了<构建之法>的第四章——两人合作,它主要讲述了在两人合作进行项目时与单人作业时的区别与不同,其中最重要的就是代码规范.代码规范:我们写的代码虽然是电脑运行,但是最终还是给人看的 ...