Question

我每秒都有一个动画，我有一个按钮停止，当我点击按钮动画停止但它继续。没有其他方法可以删除动画？这是我的code。

 $(document).ready(function() {
    setInterval(function() {
        $("#myImg").animate({top: '50%',left: '50%',width: '174px',height: '174px',padding: '10px'}, 500);
         $("#myImg").animate({ marginTop: '0',marginLeft: '0',top: '0',left: '0',width: '70px',height: '70px',padding: '5px'}, 600); 
   },1000);    
});


$("#stop").click(function(){
$("#myImg").stop();
});

谢谢

Answer 1

jsFiddle demo

- 您不需要setInterval，您可以使用.animate()回调来循环anim函数。
-Nest你的动画功能
- 在第一次.stop()次迭代中使用.animate()方法只是为了防止动画构建并清除一些动画内存;）

$(document).ready(function() {

   function anim(){
       $("#myImg").stop().animate({top: '50%',left: '50%',width: '174px',height: '174px',padding: '10px'}, 500, function(){
            $(this).animate({ marginTop: '0',marginLeft: '0',top: '0',left: '0',width: '70px',height: '70px',padding: '5px'}, 600, anim); // <-- the 'anim' callback
       });    // SCROLL THERE --> TO FIND THE CALLBACK :D --> 
    }
    anim(); // run!!



    $("#stop").click(function(){
        $("#myImg").stop();
    });

});

Answer 2

setInterval()来电持续为您的元素添加.animate()的新来电。这意味着您成功停止动画，然后setInterval()再次调用，使动画再次运行。

为什么你在setInterval()上有这个？

在任何情况下，您都必须取消时间表。你可以通过做类似以下的事情来做到这一点：

var schedule = setInterval(fn, 1000);
clearInterval(schedule);

立即停止动画jQuery

2 个答案:

jsFiddle demo