Mozilla和Chrome中的jQuery動畫功能的不同行爲

Question

我找不出爲什麼這個代碼在Mozilla和Chrome中表現不同。

第二個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

的問題是/是，壁虎/三叉戟中的第一遞增/遞減之前我基於百分比的'left' CSS值轉換爲像素，但WebKit的不是。 WebKit中基於百分比的值僅在首頁加載時發生;一旦它增加或減少，該值將是基於像素的。但是由於第一個值根據像素值還是基於百分比值而大不相同，因此減少量將會出現問題。

我添加了一個條件，將50％的初始百分比值（相對於居中的div，因此也位於文檔的中心）轉換爲文檔寬度的一半的像素值。與此同時，代碼已經發生了很大的變化，但基本問題並沒有改變（如果初始值是一個百分比，WebKit處理基於像素的位置動畫的方式與另外兩個引擎不同）。

不管怎樣，下面是結束了工作的解決方案：

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); 
}