Я уже некоторое время занимаюсь этой проблемой и не могу понять, есть ли ошибки в моем коде или jQuery.
Я делаю два одновременных .animate () в двух разных списках (A и B), которые оба смещены влево, чтобы свернуть A и развернуть B следующим образом:
$('elementA').animate({width: "hide", opacity: 0});
$('elementB').animate({width: "show", opacity: 1});
Используется для подменю в горизонтальной строке меню, которая должна появляться при щелчке по родительскому элементу верхнего меню. Проблема в том, что он кажется «сбойным» сразу после того, как указанный элемент свернут, и, таким образом, создает уродливый рендеринг на всю ширину 1 мс, прежде чем действительно скрыться. Проблема была проверена в Google Chrome и Firefox (возможно, также в Safari).
Посмотрите на пример с песочницей на jsfiddle здесь: http://jsfiddle.net/XehBN/
Обратите внимание, что некоторый код может показаться слишком излишним, но он должен учитывать несколько элементов списка и т. Д.
Где проблема? Заранее спасибо, ребята
Редактировать, уточнение:
Причина использования «скрыть» и «показывать» вместо жестко закодированных единиц в пикселях заключается в том, что я не могу предвидеть общую ширину элементов, поскольку может быть несколько элементов списка меню с различной длиной текста. Если это jQuery automagic, который производит сбой, возможно, возможно получить сгенерированную ширину через jQuery, сохранить ее в переменной и затем использовать позже?