jquery - .animateJQueryをループする方法

Question

私は内部に画像がある単一のdivで作業しています。ページの右左からスクロールしてから右に戻ってループを続けるアニメーションが必要です。ここで多くの投稿を調べましたが、スクリプトを正しく機能させることができません。

'$(document).ready(function(){
    function loop() {

       $('#clouds').animate({left: '+=1400',},50000, 'linear', function(){
           loop();
       });

HTML

< div id="clouds">< img border="0" alt="animated clouds" src="/images/clouds.png" />< /div>

CSS

#clouds {
    position:absolute;
    z-index:500;
    right:0px;
    top:10px;
}

score 20 · Accepted Answer

これを試して：

JSFiddle http://jsfiddle.net/2YqH2/

雲を右側に戻すのではありません。ループ関数の中に、追加しました

$('#clouds').css({right:0});

ループはそこから続きます。また、雲を右から左に移動させたいと言ったので、アニメーションを「右」プロパティをアニメーション化するように変更しました。

また、JavaScriptは整形式ではありませんでした。それらの閉じ中括弧と括弧を必ず取得してください。これが修正されたjavascriptです。

$(document).ready(function() {
    function loop() {
        $('#clouds').css({right:0});
        $('#clouds').animate ({
            right: '+=1400',
        }, 5000, 'linear', function() {
            loop();
        });
    }
    loop();
});

score 4 · Accepted Answer

上記の答えはすべて、やや「ハック」ソリューションです。

のjQueryドキュメントにanimate()よると、2番目optionsのパラメーターはパラメーターを持つオブジェクトcompleteです。アニメーションの完了時に呼び出される関数。

OPの場合、このoptionオブジェクトは次のように構成されます。

function loop() {
    $('#clouds').css({right:0});
    $('#clouds').animate({
        right: '+=1400',
    }, {
        duration: 5000, 
        easing: 'linear', 
        complete: loop
    });
}
loop();

score 1 · Accepted Answer

他の人にいくつかの情報を追加するためだけに、使用しない場合は、エラーを防ぐためにanimate()いくつかを使用する必要がありますsetTimeout()Uncaught RangeError: Maximum call stack size exceeded

例（jQueryを使用）：

.js

function looping() {
    $('.loader').fadeOut(1000);
    $('.loader').fadeIn(1000);
    setTimeout(function(){
        looping();
    }, 10);
}

.html

<div class='loader'>Loading...</div>

score 0 · Accepted Answer

JAVASCRIPT：

$(document).ready(function() {

    $('#clouds').click(function() {
loop();       
    });

function loop(){
    alert('a');
        $('#clouds').animate({
            opacity: 0.25,
            left: '+=1400',
            height: 'toggle'
        }, 5000, 'linear', function() {
            loop();
        });

}

});

HTML：

<div id="clouds"><img border="0" alt="animated clouds" src="../img/image.png" /></div>

エラーは、関数ループを呼び出していないことです。それがどのように機能alert('a')するかを見てください。これは、サイクルが最初からやり直したことを知るための単なるフラグであるため、削除できます。ここで、逆の動きをする必要があります（divをリセットするなど、動きのサイクルを最初からやり直すため）。

jquery - .animateJQueryをループする方法

4 に答える 4

Related

Reference