Выплывающее меню. Анимация?

Question

[Sashqa]

Вот пример jsfiddle.net/dxj5fco5/2
Собственно вопрос вот в чем, при наведении на список меню, все хорошо выезжает. но если вы попробуете с одного списка на другой перевести мышку - увидите как выплывает блок с другим списком, а предыдущий еще не скрылся.

Нужно, чтобы в начале все выплывало как и у меня сейчас. А если пользователь будет при водить по меню, то как-то резко скрывать и показывать нужные списки.
Сейчас animate height
А нужно, чтобы было hide show
как-то так.

Comments

[Антон]

Очень трудно видоизменять ваш пример. В целом — тут все делается без джаваскрипт на transition'ах.

Answer 1

[Денис Инешин]

Как бы вам объяснить. Вот сейчас у вас меню срабатывает на прямые действия пользователя (наведение мышки на пункт меню). Это нормально для каких то минимальных анимаций, но не более того.

Для более сложной логики, нужно запоминать действия пользователя в очереди:
1. Навели мышку на пункт, добавили в очередь запись о наведении
2. Убрали мышку, добавили запись об этом.
3. Навели на другой пункт, добавили запись опять.

А дальше, уже совсем другая функция следит за этой очередью и последовательно выполняет действия.
В общем примерно так это делается, я конечно описал очень упрощенно, но подумайте в этом направлении.