1. ホーム
  2. jquery

[解決済み] .animateをループさせる方法 JQuery

2022-02-16 14:52:04

質問

私は内部に画像を持つ単一の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;
}

解決方法は?

これを試してみてください。

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

雲を右側に戻していませんね。ループ関数の中に

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

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

また、あなたのjavascriptは整形式ではありませんでした。中括弧と括弧をきちんと閉じてください。修正したjavascriptはこちらです。

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