jquery - Jquery: 揺れるロゴ

Question

私は現在、昔ながらの c64 グループの Web サイトを作成しています。昔のイントロのように左右に揺れるロゴを表示できたらいいなと思いました。

持っていると思ったのですが、一方向に振ってから後ろに振ってから止まります。

コードは次のとおりです。

jQuery(document).ready(function() {
function right() {
    $('header img').animate({
    left: '680px',
    }, 5000, function() {
    left()
    });
}
function left() {
    $('header img').animate({
    left: '0px',
    }, 5000, function() {
    right()
    });
}
});

簡単なものが欠けていると確信しています。どんな助けでも大歓迎です。

Answer 1

それは範囲の問題かもしれないように見えます。次のように、ready イベント ハンドラの外側で関数を定義してみてください。

function right() {
    $('header img').animate({
    left: '680px',
    }, 5000, function() {
        left();
    });
}

function left() {
    $('header img').animate({
    left: '0px',
    }, 5000, function() {
        right();
    });
}

jQuery(document).ready(function() {
    right();
});

Answer 2

アニメーションキューと関係があると思いました。t animations に stop() を追加したところ、動作するようになりました。ページに揺れるロゴが必要な場合は、次のコードを使用します。

jQuery(document).ready(function() {
right();

    function right() {
        $('#images img').stop().animate({
// Move the image right to the width of the container, minus the width of the image
        left: '480px',
        }, 5000, function() {
        left()
        });
    }
    function left() {
        $('#images img').stop().animate({
// Move back to the left
        left: '0px',
        }, 5000, function() {
        right()
        });
    }

});