Mozilla和Chrome中jQuery动画函数的不同行为

我不明白为什么这段代码在Mozilla和Chrome中表现不同

第二个click函数在Gecko和WebKit中都能正常工作，但第一个函数在WebKit中的偏移量不是减少-165px，而是增加了更大的偏移量

如果有任何细节会有所帮助，或者如果没有更多的代码很难知道，请告诉我

$('#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 );
    }
});

---

问题是Gecko/Trident在第一次递增/递减之前将基于百分比的“左”css值转换为像素，但WebKit没有。WebKit中基于百分比的值仅发生在第一次页面加载时；一旦增加或减少，该值将基于像素。但是，由于第一个值因其是基于像素还是基于百分比而大不相同，因此减量将不正常

我添加了一个条件，将相对于居中div的50%初始百分比值（文档中心也是如此）转换为像素值（文档宽度的一半）。代码在此期间发生了很大变化，但基本问题没有改变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);
}

想提供一份工作吗？