5

私はこのコードを使用します：

$("img.cloudcarousel").each(function(i, e){
  coords[i] = $(e).offset();
});

画像の位置を保存します（そして機能します）。次に、アニメーション化して動かします。次に、次のコードを使用します。

 $("img.cloudcarousel").each(function(i, e){
   $(e).animate({top:coords[i].top, left:coords[i].left}, 1000);
 });

それらを元の場所にアニメーション化します。IE (少なくとも 8) では正常に動作しますが、Chrome と Firefox では 40 ～ 50 ピクセルが左と下にアニメーション化されすぎます (オーバーアニメーションのように)。

どうやってこれを見つけたのか聞かないでください:それらの上でマウスホイールを使用すると、それらが属する場所に移動します!

アニメーション キューのビルドアップに何らかの形で関連していると思いますが、私は 4 つの画像しか使用しておらず、x 時間後には自然に修正されず、マウス ホイールでのみ修正されます。

編集：jsfiddle.netに追加

そのサイトがどのように機能するかはよくわかりませんが、HTML と JS を追加しました。

http://jsfiddle.net/3wqYg/

4

1 に答える 1

3

$(e).offset() は、フィドルで現在定義されている値を返しません。オフセットの定義を調べていませんが、座標を出力すると、コードと同じではないことがわかります

編集:offset() http://api.jquery.com/offset/を参照して問題が発生していることがわかりますが、ドキュメントに相対的な x、y を返しますが、アニメーション化すると、親要素に相対的になります (デフォルトの動作)。そのため、ドキュメントでは position() の使用について言及しています。それは親要素に相対的です。私は試していませんが、それを使用するとうまくいくはずです。

最終編集:はい、位置で正常に動作します。http://jsfiddle.net/3wqYg/1/ を参照してください。フィドルではアニメーション化されないため、テスト ページにコピーする必要があります。

于 2012-05-08T17:31:17.873 に答える