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

问题在于Gecko / Trident是否将基于百分比的'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);
}

Mozilla和Chrome中jQuery动画功能的不同行为

1 个答案: