Question

在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停止动画？

Answer 1

尝试

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
});

<小时/> 参考

Answer 2

将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
   });

Answer 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看起来像“完成”动画..

停止鼠标悬停的背景动画

3 个答案: