javascript - jQuery slide updown on hover bug - Stack Overflow

admin管理员组

文章数量:1384482

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 .jpg

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./fileserver/jQuery_hover_showhide.jpg

• javascript
• jquery
• html
• jquery-ui
• hover

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Apr 7, 2010 at 18:53 o01o01 5,4501212 gold badges4848 silver badges8787 bronze badges 2

• Are you using .hover() or .mouseXX events to bind the event handler? – Nick Craver Commented Apr 7, 2010 at 19:05
• I used the method in the answer marked as the solution. Ergo the .hover() event. – o01 Commented Apr 7, 2010 at 23:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

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

本文标签： javascriptjQuery slide updown on hover bugStack Overflow