3

1秒ごとにアニメーションがあり、[停止]ボタンがあります。ボタンをクリックすると、アニメーションは停止しますが、その後も続行されます。アニメーションを削除する別の方法はありませんか？これは私の コードです。

 $(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 に答える