jQuery скользить вверх / вниз при наведении

Question

У меня есть один большой div с одним меньшим div внутри. Меньший div сначала отображается как скрытый. Когда пользователь наводит указатель мыши на большой контейнерный элемент div, анимация меньшего элемента div активируется с помощью функций show / hide. Пока все отлично работает.

Тем не менее. Меньший div анимируется снизу - поэтому, если я позволю курсору навести курсор на контейнер в самом низу, он будет зависать над анимацией меньшего div, пока он скользит. Так что теперь курсор вместо этого находится над меньшим div большего div, и, таким образом, запуск функции скрытия для меньшего div. Это создает бесконечный цикл вызовов show / hide, когда меньший элемент div входит и выходит из того места, куда указывает курсор.

Есть идеи, как этого избежать и не сломать зависание на контейнере, когда в него входит меньшее деление?

Вот что я имею в виду:

альтернативный текст http://archivedworks.com/fileserver/jQuery_hover_showhide.jpg

Answer 1

Вы можете сделать это так:

$("#outerDiv").hover(function() {
  $("#innerDiv:hidden").slideDown(); //your show code
}, function() {
  $("#innerDiv:visible").slideUp(); //your show code
});

Это ставит в очередь только скрытую анимацию, если она видима (:visible), и только ставит в очередь показную анимацию, если она не отображается (:hidden), предотвращая поведение очереди / цикла, которое вы сейчас имеете.

Answer 2

$('#idOfLargeDiv').hover(
    function() {
        $('#idOfSmallDiv').slideDown();
    }, 
    function() {
        $('#idOfSmallDiv').slideUp();
    }
);