jQuery动画的hover连续触发动画bug处理_让hover事件只触发一次动画的实现

时间: 2018-07-06阅读: 2716标签: jquery

一个简单的鼠标滑过的动画而已,但是当我测试的时候发现,当我发神经似的来回滑动时,事件就被触发了多次,动画也就重复了多次,怎么才能不重复出现,即动画过程中,鼠标滑过这个div,不会触发该事件。代码如下:

$("div").hover(
    function() {
        $(this).animate({"margin-top":"100px"},1000);
    }, 
    function() {
        $(this).animate({"margin-top":"200px"},1000);
    }
);


这是由于元素绑定hover事件之后,如果光标移入移出的速度太快,导致移入的动画还没执行完,就移出光标,则移出的动画效果就会被放到队列,等移入的动画完成后在执行。因此如果光标的移入移出速度太快,就会导致动画效果与移动光标不一致,出现重复出现的情况。


下面是几种解决办法

1、你可以使用jq的stop方法:

$(div).stop(false, true).animate({'margin-top':'100px'},1000);

如果stop()的第一个参数为true,表示立即清除当前的动画队列,默认为fx;如果第二个参数为true,表示立即将当前正在执行的动画置为它的结束状态。  

停止元素的动画:stop([cleanQueue, gotoEnd]):第一个参数代表是否要清空未执行完的动画队列,第二个参数代表是否直接将正在执行的动画跳转到末状态。(可缺省)。

(1)无参数stop():立即停止当前的动画,如果接下来还有动画则以当前状态开始接下来的动画。
(2)stop(false, true) : 当前的动画直接达到末状态。
(3)stop(true, true) : 当前的动画直接达到末状态并清空当前对象的动画队列。

注意:jQuery只能设置正在执行的动画的最终状态,不能直接达到未执行动画的最终状态。


2、执行动画前判断一下:

if (!$(obj).is(':animated')) {
        // to do something
}


3、延迟

var $v_show = $(".opp-header-bg");
$(".opp-header-container").hover(function(){
   $v_show.slideDown(50);
},function(){
    setTimeout(function(){ $v_show.slideUp(50)} , 300 ); 
});


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/911

wrap_jQuery wrap()的用法

jQuery中wrap()用于把所有匹配的元素用其他元素的结构化标记包裹起来。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的)

jQuery如何为指定标签添加和删除一个样式

在网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态的给元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能。

jQuery常用知识总结

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程

基于jQuery实现简单的js模块化

在多人合作完成网页,经常遇到大家的js代码相互影响的问题。现在有许多模块化的前端框架,应该是可以解决这个问题。但本人并非前端开发人员,那些框架都没用过,只对jQuery相对熟悉,就想用jQuery来解决这个问题

利用jQuery not()方法选取除某个元素外的所有元素

日常的工作中可能会用到,选取处某个或者某些元素外的所有元素。这时我们可以使用 jQuery 遍历中的 not() 方法来排除某些元素,例如根据元素的 #id ,.class 等排除,代码如下:

Eclipse去除jquery引入错误

去除eclipse的JS验证:第二步:右键项目 -> properties -> Builders 去掉JavaScript Validator 前面的勾,第三步:复制该js文件到某个地方,然后从eclipse中直接删除 了报错的js文件,错误消失,再把刚才那个js文件拷进来。

原生JS替代jQuery的各种方法汇总

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。

jQuery的淡入淡出

在jQuery中的一些特效中,可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo(),下面为分别为大家介绍各个方式的使用。

前端程序员应该知道的15个jQuery小技巧

15个jQuery小技巧:返回顶部按钮,预加载图像,检查图像是否加载,自动修复破坏的图像,悬停切换类,禁用输入字段,停止加载链接,淡入/滑动切换,简单的手风琴...

jquery动画实现_浅谈jQuery之动画

jQuery提供了JS未能提供的动画效果,利用jQuery的动画效果,可以极大的简化JS动画部分的逻辑,包括:滑入滑出动画、淡入淡出动画、显示隐藏动画、停止动画、自定义动画

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!