jQueryの.animate（）ループは、私は（jQueryのを使用して）次のJavaScriptコードを有する時間

Question

にわたってオフセット予想外の生成：

floatUpAndDown(); 
function floatUpAndDown() { 
    $("#bird").animate({top: '+=30px'}, 1400) 
       .animate({top: '-=30px'}, 1400, 'swing', floatUpAndDown); 
} 

#bird絶対配置されているIMGタグです。上記のコードを見るだけで、鳥が30px移動してから30pxまで戻ってから、永遠にループすると思うはずです。これは実際にはまったく起こりますが、これを除いて：時間がたつにつれて、オブジェクトはページの上端に近づくようになります。上に到達すると、それは依然として浮動し続けますが、yオフセットは増加しなくなります。あなたはこの奇妙な行動をどうしたのですか？

Answer 1

私には丸め誤差のような音がします。 #birdを自動的に正しい開始位置に移動する関数の開始時にステートメントを追加することで修正できます。

Answer 2

編集：前回の回答のほとんどが間違っていたため、完全に書き換えました。

mblaseの提案によれば、jQueryのoffset（）関数を使用して元のオフセットを保存してから、2番目のアニメーションのコールバックまたはfloatUpAndDown（）の開始時に再び要素をリセットすることができます。

var bird = $("#bird"); 
var birdOrgOffset = bird.offset(); 
function floatUpAndDown() { 
    bird.offset(birdOrgOffset); 
    bird.animate({top: '+=30px'}, 1400) 
     .animate({top: '-=30px'}, 1400, 'swing', floatUpAndDown); 
} 
floatUpAndDown(); 

あなた（または他の誰か）のちょっとしたヒント。 $（ " - bird"）のように$（）を呼び出すことは、リソースの面ではコストがかかります。同じセレクターを繰り返し呼び出すことがわかった場合は、上記の例で行ったように、一度呼び出すとvarに結果を格納するほうがよい場合がよくあります。したがって、アニメーションを再起動するたびに#birdを再選択するのではなく、オフセットをリセットしてから、その結果を再利用します。一般的には気づかないでしょうが、ループ内でセレクタを使用している場合は、確実に加算されます。