jQuery slide up/down on hover bug

Question

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

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

Любые идеи, как избежать этого и не нарушать зависание на контейнере по мере того, как вводится меньший div?

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

alt text 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(); 
    } 
);