Разное поведение анимированной функции jQuery в Mozilla и Chrome - PullRequest
Новая
       18

Разное поведение анимированной функции jQuery в Mozilla и Chrome

1 голос
/ 16 июля 2011

Я не могу понять, почему этот код ведет себя по-разному в 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 );
    }
});

1 Ответ

0 голосов
/ 19 июля 2011

Проблема заключалась в том, что Gecko / Trident конвертировали мое значение 'left' css в процентах в пиксели до увеличения / уменьшения first , а 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);
}
...