2017-01-20 1 views
0

このjqueryループを続けることはできません。私はそれが私が行方不明の単純なものだと確信しています。アニメーションをループする

$(document).ready(function loop(){ 
    var div = $("div"); 
    div.animate({width: '800px', opacity: '0'}, "slow"); 
    setTimeout(function(){loop()}, 1); 
}); 
+0

あなたは何を達成しようとしていますか?関数の2番目のループはここで何も変更されません。 – empiric

+0

jqueryを練習しており、アニメーションを継続しておきたいだけです。私はsetTimeoutがループ機能を繰り返し続けていると思ったが、なぜそうでないのか分からない。 –

+1

私はこのループに1つの問題があります(以下の答えに示されている修正を除いて)。アニメーションの後にdivをリセットするものは何もないので、次回ループが発生したときにはdivはアニメーション化されず、ループが動作していないように見えるようにしてください。 – Pete

答えて

0

これは、あなたが見ているものを次のようになります。

$(document).ready(function() { // anonymous callback function for the ready-handler 
 
    (function loop() { //IIFE construct for the loop function, this will call the function when loaded. 
 
    var div = $("div"); 
 
    div.animate({ 
 
     width: '800px', 
 
     opacity: '0' 
 
    }, "slow"); 
 
    console.log('loop'); 
 
    setTimeout(function() { 
 
     loop() //invoke the function recursivly 
 
    }, 100); 
 
    })(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Alternativlyあなたが使用することができますsetInterval()

参考:

jQuery - .ready()

IIFE


Example

+0

まだループしていませんが、参考に感謝します。 –

+0

これはループしています。例に進み、コンソールを開きます。何が起こると思いますか?アニメーションは最初に実行されますが、CSSがリセットされないため何も影響しません – empiric

関連する問題