У меня есть горизонтальное меню (представленное в виде списка), и когда вы наводите курсор мыши на один из элементов списка, он анимирует раскрывающееся меню, являющееся дочерним элементом элемента списка.

Это прекрасно работает, если вы перемещаете курсор по меню с «нормальной» скоростью. Проблема, с которой я сталкиваюсь, заключается в поведении меню, если вы ошибочно перемещаете курсор над меню. Он оставляет показанные ранее наведенные элементы неподвижными, и мне приходится парить снова и снова в dropMenu, пока все они не вернутся в исходное состояние (высота: 0).

Мой JQuery для меню ниже:

$('#templateNav > ul > li').bind({
        mouseenter: function() {
            $(this).find(".dropMenu").clearQueue().animate({
                height: 250
            }, 200);
        },

        mouseleave: function() {
            $(this).find(".dropMenu").clearQueue().height(0);
        }
    });

А вот пример кода моего меню:

<div id='templateNav'>
    <ul>
        <li>Menu 1<span class='dropMenu'>...</span></li>
        <li>Menu 2<span class='dropMenu'>...</span></li>
        <li>Menu 3<span class='dropMenu'>...</span></li>
    </ul>
</div>

Любые идеи?

0
Tom 4 Фев 2013 в 16:14

2 ответа

Лучший ответ

Смотрите этот http://jsbin.com/ukuqik/1

$('#templateNav > ul > li').bind({
    mouseenter: function() {
        $(this).find(".dropMenu").stop(true,true).animate({
            height: 250
        }, 200);
    },

    mouseleave: function() {
        $(this).find(".dropMenu").stop(true,true).animate({
            height: 0
        }, 200);
    }
});

И немного лучше: http://jsbin.com/ukuqik/6

2
Anujith 4 Фев 2013 в 12:29

Вот решение:

Используйте переменную и установите ее, когда анимация закончится .. Что-то вроде:

var isAnimating = false;
mouseenter: function() {
  isAnimating = true; // Here we start
  $(this).find(".dropMenu").clearQueue().animate({
       height: 250
  }, 200, function (){isAnimating=false}); // Now we are done with animation
},
mouseleave: function() {
  if(isAnimating == false) $(this).find(".dropMenu").clearQueue().height(0);
}

Или вы можете остановить анимацию, когда вы перемещаете мышь, используя .stop ().

0
Alaa Badran 4 Фев 2013 в 12:25