Question

I have one large div with one smaller div inside it. The smaller div is at first displayed as hidden. When the user hovers the mouse over the large container-div the smaller div is animated in with the show/hide-functions. So far everything works fine.

However. The smaller div is animated in from the bottom – so if I let the cursor hover over the container at the very bottom, it’s hovering over the animation of the smaller div while it’s sliding in. So now the cursor is hovering over the smaller div instead of the larger div, and thus triggering the hide-function on the smaller div. This creates an infinite loop of show/hide calls as the smaller div slides in and out of where the cursor is pointing.

Any ideas how to avoid this and not break the hovering on the container as the smaller div enters?

This is what I mean:

alt text http://archivedworks.com/fileserver/jQuery_hover_showhide.jpg

Answer 1

You can do it like this:

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

This only queues a hide animation if it’s visible (:visible), and only queues a show animation if it’s not (:hidden), preventing the queue/loop behavior you have now.