Я анимирую ширину элемента li
с помощью jQuery в простом фрагменте кода. Я использую hover()
в качестве обработчика и .animate()
для анимации ширины. Вот мой код.
$('li').each(function() {
//store the original width of the element in a variable
var oldWidth = $(this).width();
$(this).hover(
function() {
//when the mouse enters the element, animate width to 900px
$(this).animate({width: '900px'}, 600, 'linear')
},
function() {
//when the mouse leaves, animate back to the original width
$(this).animate({width: oldWidth}, 350, 'linear')
}
);
});
Код действительно очень прост и работает , но с одной очень странной особенностью в Chrome. При анимации элементов внутрь и наружу элементы li
«трясутся», как будто они действительно холодные и дрожат. Вы можете увидеть поведение здесь в живом примере:http://missmd.org/(редактировать :ошибка исправлена )
Раньше я анимировал кучу вещей с помощью jQuery и никогда не видел такого поведения. Есть ли какое-либо объяснение, почему это происходит и как я могу обойти это?Мне интересно, это потому, что я перемещал элементы вправо и анимировал влево. Ошибка сводит с ума и сильно отвлекает от общего представления (, по крайней мере, для меня ). Кто-нибудь еще видел это раньше?
Изменить, чтобы уточнить:это не фактический элемент li
, который «дрожит», это текст внутри него, который слегка, но заметно дрожит слева направо очень быстро, когда анимация выполняется. Я в тупике.
Редактировать два:немного повозившись с CSS, теперь я могу воспроизвести эффект только в Chrome(21.0.1180.60 бета -м для меня ). В Firefox это работает как задумано. Он также отлично работает в IE. Очень иронично, что Chrome (, обычно отлично справляющийся с этим ), теперь доставляет мне неприятности. Вырывает волосы, проверяет вменяемость
Вот мой HTML, чтобы помочь разобраться в этом. Мы воспроизвели проблему в jsFiddle ChrisFrancis.
Я совершенно озадачен. Это также может быть ошибка в движке Chrome/V8 JS, и мы ничего не можем с этим поделать.