jquery hover事件只触发一次动画

Posted 努力成为一名合格的前端开发工程师!!!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery hover事件只触发一次动画相关的知识,希望对你有一定的参考价值。

最近工作时遇到个关于动画的问题,如下:

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

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

带着疑问,google之,

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

而解决办法有两种:

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

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

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

延伸:(看来我真的得好好看看jq的api了)

停止元素的动画: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 );
});

 

以上是关于jquery hover事件只触发一次动画的主要内容,如果未能解决你的问题,请参考以下文章

Hover/mouseenter 事件反复触发 jQuery UI 的“动画”

鼠标hover的jquery代码,鼠标不停经过时它就不停触发,怎么让它设个间隔或设一段时间只能触发一次

jQuery解决动画累积问题

jquery slide动画引发的bug解决方法

关于Jquery动画滞后问题(转)

javascript 如何防止多次触发hover事件