У меня есть два сайта, над которыми я работаю, где я использую jQuery для анимации некоторых объектов через свойства CSS. В Firefox все работает фантастически, но были некоторые ошибки webkit, из-за которых мои объекты исчезали и снова появлялись за пределами экрана до начала анимации.

http://coreytegeler.com/gl/ (щелкните текстовое поле)

$('#front-nav-wrapper').css({'position' : 'fixed','top': '55px', 'opacity' : '1' }); 

http://coreytegeler.com/justin/ (щелкните любое поле)

$("#nav ul li").click(function() {
    $("#nav ul li#a").animate({'margin-top' : '-300px' , 'margin-left' : '0px', 'left' : '10px'}, 500, 'swing');
    $("#nav ul li#b").animate({'margin-top' : '-200px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
    $("#nav ul li#c").animate({'margin-top' : '-100px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
    $("#nav ul li#d").animate({'left' : '10px'} , 500, 'swing');
    $("#nav").animate({'margin-top' : '100px'} , 500, 'swing');
});

Я уверен, что это известная ошибка с простым исправлением, но я пока не могу найти исправление :(

1
Corey Tegeler 6 Июл 2013 в 21:14

1 ответ

Лучший ответ

Насколько я могу судить, проблема заключается в том, что webkit не может анимировать свойство left от того, что изначально является «автоматическим» значением, до пиксельного смещения. Он устанавливает для свойства значение 0, а затем выполняет анимацию оттуда.

Одно из решений, которое я могу предложить, - это вычислить текущее пиксельное смещение каждого элемента li непосредственно перед запуском анимации и установить их свойства left на эти смещения.

Что-то вроде этого:

$("#nav ul li").each(function(){
    $(this).css('left', $(this).position().left + 'px');
});

jsFiddle пример

Это основано на вашем втором примере ссылки.

1
James Holderness 6 Июл 2013 в 23:07