Странный эффект «дрожания» при анимации ширины с помощью jQuery (только в Chrome!)

Я анимирую ширину элемента 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, и мы ничего не можем с этим поделать.

7
задан wnajar 17 March 2013 в 07:24
поделиться