この例では、赤の div をアニメーション化すると、右に奇妙な動きをします。問題が発生するのは Firefox だけだと思います。div は正しく、スクロール バーと位置は固定されています。
(絶対位置を使用すると、動きを解決します。ただし、ユーザーがスクロールすると、divが移動し、右、下に「固定」される必要があります)
- ファイアフォックス
- 右
- スクロール・バー
- 固定位置
ここで確認してください: http://jsfiddle.net/LhAEh/1/
HTML:
<div id="blue"></div>
<div id="red"></div>
CSS:
#red {
position: fixed; /* fixed genera el problema */
bottom: 20px; right:25px;
width:80px; height:50px;
cursor:pointer;
background:red;
}
#blue {
margin:0 auto;
width:80px; height:500px;
background:blue;
}
Jクエリ:
$(function(){
$("#red").click(function() {
$("#red").animate({bottom:'-80px'},1000);
});
})
画像 1: 元の位置
画像 2: 誰かがクリックすると、右に移動してから下に移動します。下にしか動かないはず