鼠标悬停时停止背景动画答案

【问题标题】：stop background animation on mouse hover鼠标悬停时停止背景动画
【发布时间】：2013-12-09 20:57:52
【问题描述】：

在 jquery 上，我在一个菜单链接上设置了动画背景的间隔，我的代码是

<script>
window.setInterval(function(){
        $('.freesubmiteff').animate({ backgroundColor: "#46B525" }, "slow");
        $('.freesubmiteff').animate({ backgroundColor: "#FFFFFF" }, "slow");
        $('.freesubmiteff').animate({ backgroundColor: "#46B525" }, "slow");
        $('.freesubmiteff').animate({ backgroundColor: "#FFFFFF" }, "slow");
        }, 1000);
</script>

它工作正常，但我的问题是如何在mouse over 上停止动画？

【问题讨论】：

标签： jquery jquery-animate mouseover

【解决方案1】：

将您的 setInterval 分配给像

这样的变量

var interval;
function fun () {
    interval = window.setInterval(function(){
                     ......
                    });
}

然后使用Window.clearInterval清除它

$('.freesubmiteff').on('hover', function () {
     clearInterval(interval);  // happens when mouseover
}, function() {
   fun();     //In callback, start again the animation
   });

【讨论】：

【解决方案2】：

试试

var fst = $('.freesubmiteff'); //cache selector
function ani() { //animation function
    fst.animate({
        backgroundColor: "#46B525"
    }, "slow");
    fst.animate({
        backgroundColor: "#FFFFFF"
    }, "slow");
    fst.animate({
        backgroundColor: "#46B525"
    }, "slow");
    fst.animate({
        backgroundColor: "#FFFFFF"
    }, "slow");
}
var set_int = window.setInterval(ani, 1000); //creating interval with var name set_ani
fst.hover(function () {
    $(this).stop(true, true); //stop animation on hover element 
    clearInterval(set_int); //clear the inerval
}, function () {
    ani(); //if you want animation function to start as mouse leave happens
    set_int = window.setInterval(ani, 1000); //set interval again on mouse leave
});

参考

【讨论】：

鼠标离开后如何开始间隔？
@MarkRichards hover 有两个功能第一个mouse over 第二个mouse leave。
@MarkRichards 欢迎乐于帮助:)。添加参考和解释给它阅读。

【解决方案3】：

用这个怎么样？

$([selector]).mouseover(function() {
    $(".freesubmiteff").finish();
});

查看 jquery api 中的“完成”方法。

http://api.jquery.com/finish/

你可以用这个方法停止动画..

你也可以像这样使用“停止”方法..

代码 1：

$(".selector").stop(true, false);

代码 1 在当前状态下看起来像是停止动画。

代码 2：

$(".selector").stop(true, true);

代码 2 看起来像“完成”动画..

【讨论】：