javascript - jQuery 立即停止动画

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

1. -您不需要 setInterval，您可以使用 .animate() 回调来循环您的 anim 函数。
2. -嵌套你的动画函数
3. -在您的第一个 .animate() 迭代中使用 .stop() 方法只是为了防止动画累积并清除一些动画内存；)

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

});