MozillaとChromeのjQueryアニメーション機能の動作が異なります

Question

MozillaとChromeでこのコードが異なる動作をする理由を理解できません。

第2のclick関数は、GeckoとWebKitの両方で正常に機能しますが、最初に、オフセットを-165px減らすのではなく、WebKitのオフセットを大きくします。

詳細がわかっていたり、コードがなくてもわかりにくい場合は、教えてください。

$('#pager-next-nav').click(function() { 
    if ($('#pager').offset().left < 376 && $('#pager').offset().left > -270) { 
     $('#pager').animate({ left: '-=165' }, 1000); 
     $(this).css({ 'cursor': 'pointer', 'color': '#FFF' }); 
    } 
    else $(this).css({ 'cursor': 'default', 'color': '#CCC' }); 
}); 

$('#pager-prev-nav').click(function() { 
    if ($('#pager').offset().left < 300) { 
     $('#pager').animate({ left: '+=165' }, 1000); 
    } 
}); 

Answer 1

問題は、/ 最初インクリメント/デクリメントが、WebKitのではなかった前のGecko /トライデントは、ピクセルに私の割合をベース'left' CSS値を変換したことがあるました。 WebKitのパーセンテージベースの値は、最初のページの読み込み時にのみ発生していました。一度インクリメントまたはデクリメントされると、その値はピクセルベースになります。しかし、最初の値はピクセルかパーセンテージベースかによって大きく異なりますので、減分は駄目です。

最初のパーセンテージ値を50％（これは、中央のdivと同じであったため、ドキュメントの中央にもあります）を、ドキュメントの幅の半分であるピクセル値に変換するための条件を追加しました。その間にコードが大きく変更されましたが、基本的な問題は変更されませんでした（WebKitは、初期値がパーセンテージの場合、他の2つのエンジンとは位置のピクセルベースのアニメーションを処理しました）。

var document_width = $(document).width(); 
var left_pos = $('#pager').css('left'); 
// if left_pos is a percentage 
if (left_pos == '50%') { 
    left_pos = (document_width/2) + 'px'; 
    $('#pager').css('left', left_pos); 
}