0

要素の背景位置を左から右、右から左 (またはその逆) にアニメーション化し、それを繰り返し続けたいと考えています。私はこれを達成しましたが、間違った方法で。

  1. コードがぐちゃぐちゃ

  2. 要素の背景位置は、しばらくするとアニメーションを停止します。

    window.setInterval(function(){
    if($(element).css("background-position") == posRight + "px 50%"){
        move("left");
    } else if($(element).css("background-position") == posLeft + "px 50%"){
        move("right");
    }
}, 500);

問題はsetIntervalにあると確信していますが、代わりに何を使用できるかわかりません。間隔を使用しない場合、if ステートメントはチェックされません (または 1 回だけ)。間隔時間を短くすると、if ステートメントが位置が X にあるかどうかを確認するため、単純に機能しなくなりますが、位置は X から始まるため、何もしません。

私はどこについて話しているのですか？ フィドル: http://jsfiddle.net/8eS3a/1/

私が欲しいものは？ setInterval の回避策。

グラデーションを背景画像に変更して、何が起こっているかを確認できます。画像が削除されることがあるので、グラデーションを使用しました。

4

1 に答える 1

1

animate()次のように、組み込みのコールバックを使用します。

function changePos(element, posLeft, posRight, duration) {
    var state = $(element).data('state'),
        pos   = state ? posRight : posLeft;

    $(element).animate({backgroundPosition: pos}, duration, function () {
        changePos(element, posLeft, posRight, duration);
    }).data('state', !state);
}

changePos("#elem1", 0, 40, 300);
changePos("#elem2", 0, 40, 600);

フィドル

于 2013-07-27T11:34:57.533 に答える