jQuery动画的hover连续触发动画bug处理

转载 2015年07月07日 12:14:00

方法一经过测试非常好用!!!!

在前端开发中用的较多的是jquery,之前遇到一个问题,一个下拉的jquery下拉菜单效果,hover上去,一直闪动,用mouseovermouseout好好的,当时没搞定,今天逛论坛看到一个方法,可以行.只怪自己之前看jquery api的时候不是很仔细。
 
解决闪动 可以使用Stop()的jquery api方法:
stop([clearQueue],[jumpToEnd])
 
概述
停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行
 
参数
[clearQueue],[gotoEnd] Boolean,BooleanV1.2clearQueue:如果设置成true,则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。
[queue],[clearQueue],[jumpToEnd]BooleanV1.7queue:用来停止动画的队列名称
clearQueue:如果设置成true,则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true,则完成队列。可以立即完成动画。
当鼠标移上去的时候就菜单下拉,当鼠标离开的时候菜单上卷,下拉和上卷的动画时间都是5秒种。
 
JavaScript Code复制内容到剪贴板
$("#menu").hover(    
        function () {    
            $("#menu").animate({ height: "500" }, 5000);    
        },    
        function () {    
            $("#menu").animate({ height: "100" }, 5000);    
        }    
);  
如果我快速不断地将鼠标移入移出菜单(即,当菜单下拉动画未完成时,鼠标又移出了菜单)就会产生“动画积累”,当鼠标停止移动后,积累的动画还会持续执行,直到动画序列执行完毕。这样导致动画效果与鼠标动作不一致。
要解决此问题只需要在移入移出动画之前加入stop(),结束当前动画进入下个动画即可。
 
代码如下:
 
JavaScript Code复制内容到剪贴板
$("#menu").hover(    
        function () {    
            $("#menu").stop().animate({ height: "500" }, 5000);    
        },    
        function () {    
            $("#menu").stop().animate({ height: "100" }, 5000);    
        }    
);  
如果需到组合动画,在移入移出动画之前加入stop()来停止当前动画,如下
JavaScript Code复制内容到剪贴板
$("#menu").hover(    
        function () {    
            $("#menu").stop().animate({ height: "500" }, 5000).animate({ width: "500px" }, 3000);    
        },    
        function () {    
            $("#menu").stop().animate({ height: "100" }, 5000).animate({ width: "100px" },3000);    
        }    
);  
效果并不好,因为stop()只是停止了当前第一步的动画(即{height:”500″}),然后又进入了第二步的动画(即[width:”500″})。
此时stop()的第一个参数就派上了用场,它会把下面没有执行的动画序列都清空掉。
 
JavaScript Code复制内容到剪贴板
$("#menu").hover(    
        function () {    
            $("#menu").stop(true).animate({ height: "500" }, 5000).animate({ width: "500px" }, 5000);    
        },    
        function () {    
            $("#menu").stop(true).animate({ height: "100" }, 5000).animate({ width: "100px" },5000);    
        }    
);  
当然也可以使用第二个参数,让动画达到最后状态。如:stop(false,true)



如下代码所示:

$("td").hover(


function () {


$(this).slideDown(200);


},


function () {


$(this).slideUp(200);


}


);


在hover事件中,如果该案例为图片滑过效果。用户持续,反复,快速地触发鼠标事件,动画则会产生延迟执行的bug。解决该问题,从代码逻辑入手,需完善动画的触发规则。在用户未执行完之前,不允许动画累积即可。解决方案之一,


如下代码所示:


$("td").hover(


function () {


$(this).filter(':not(:animated)').slideDown(200);


},


function () {


$(this).slideUp(200);


}


);                          


filter(':not(:animated)')表示过滤掉正在执行动画的模块;这样,动画未执行完之前,无法触发新的动画;就无法实现动画队伍的累积。基本消除了前文出现的问题。






jquery hover事件只触发一次动画

最近工作时遇到个关于动画的问题,如下: $("div").hover( function() { $(this).animate({"margin-top":"100px"}...
  • gmd_web
  • gmd_web
  • 2015年12月06日 18:23
  • 3548

【jquery】解决轮播图鼠标快速移入移出导致bug思路

经过这几天的学习,可以用jquery写一些简单的效果。写轮播图的时候因为用的是click()而不是mouseenter(),所以没有发现这个bug。后来上网上看到好多类似的问题,查询了一番后总结了一下...
  • pg_tang
  • pg_tang
  • 2017年08月14日 15:27
  • 292

怎么实现div左右移动|animate animation hover的区别

transition过渡标签 常用于以下一些属性 位置:left up 长宽:height width 颜色:bg-color 例如: div{ width:100px;height:100px...

关于jQuery中hover事件的一个小bug

在jQuery中有一个hover()方法,它可以实现模拟css中:hover这个伪类的效果。 css伪类写法如下: a:hover, a.hover { color: #ccc; } j...

jQuery的mouseover和mouseout事件当快速移动 事件延迟触发问题

首先来看一段代码: $(document).ready(function(){ $("div.div1").mouseover(function() {$("div.div...

HTML 5 Web 存储 与 应用缓存

HTML 5 Web 存储 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 se...

jquery hover事件只触发一次动画

最近工作时遇到个关于动画的问题,如下: $("div").hover( function() { $(this).animate({"margin-top":"100px"}...
  • gmd_web
  • gmd_web
  • 2015年12月06日 18:23
  • 3548

分针网—每日分享: jQuery动画的hover连续触发动画bug处理

解决闪动 可以使用Stop()的jquery api方法: stop([clearQueue],[jumpToEnd]) 概述:停止所有在指定元...

前端动画的bug:hover一个li,左滑进背景图,li上文字消失太快(或者说出现闪现消失)

要求实现的动效:左边每一条li鼠标经过的时候,蓝色框从左边滑进,右边图片从右边滑进 出现的bug:hover上一个li,文字的变白速度比滑出条速度快,出现一瞬间的闪现效果(或者说完全消失) 解决,...

jQuery动画连续触发、滞后反复执行解决办法

在做一个鼠标进出图片,遮罩层上下移动时,遇见的问题(如图所示:): 只要用鼠标不断进出图片,因动画未执行完成就触发下一个事件,使动画效果滞后和反复执行,效果非常不佳. 解决办法如下: 利用jQu...
  • oxgos
  • oxgos
  • 2017年04月03日 00:27
  • 214
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery动画的hover连续触发动画bug处理
举报原因:
原因补充:

(最多只允许输入30个字)