3

我每秒钟都有一个动画,并且我有一个停止按钮,当我单击该按钮时,动画会停止,但之后会继续。没有其他方法可以删除动画吗?这是我的 代码

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

​谢谢

4

2 回答 2

3

jsFiddle 演示

  1. - 你不需要setInterval,你可以使用.animate()回调来循环你的anim函数。
  2. -嵌套您的动画功能
  3. .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();
    });

});
于 2012-10-22T19:00:14.393 回答
1

setInterval()调用不断.animate()向您的元素添加新调用。这意味着您成功停止了动画,然后再次setInterval()调用它,使动画再次运行。

你为什么要戴这个setInterval()

无论如何,您也必须取消计划。您可以通过执行类似于以下的操作来做到这一点:

var schedule = setInterval(fn, 1000);
clearInterval(schedule);
于 2012-10-22T19:01:09.620 回答