JQuery Hide / Show with slide on Hover ... best way to do this?

Question

Mostly problems arise using Hover to hide or show an element.

The idea is simple, show a div on the hover. When you no longer soar, hide it. The problem is that the mouse hangs over the div and exits too quickly, the show / hide div remains visible. I hope this is something easily fixed and not a typical hover event problem.

jQuery ( function() { jQuery(".slideDiv").hide(); jQuery(".mainDiv").hover ( function() { var children = jQuery(this).children(".slideDiv"); if (children.is(":hidden")) { children.show("slide", { direction: "left" }, 100); } }, function() { var children = jQuery(this).children(".slideDiv"); children.hide("slide", { direction: "left" }, 100); } ); } ); 

Styles look like this:

  .mainDiv { margin:5px; height:200px; } .slideDiv { background-color:Teal; float:left; height:200px; position:absolute; z-index:100; } 

And markup

  <div class="mainDiv"> <div class="showDiv"> Hover me </div> <div class="slideDiv"> Do you see me? </div> </div> <div class="clear"></div> <div class="mainDiv"> <div class="showDiv"> Hover me too </div> <div class="slideDiv"> Do you see me now? </div> </div> 

Answer 1

Use the hoverIntent plugin. This avoids what is displayed if the user simply moves the mouse over the elements and avoids the ugly chain of animations.

Answer 2

I tried your script and it did as you described. I tried to remove children.is (": hidden") from your script, but the problem still occurred.

When I rewrote it, the script div will never remain visible. So it seems like the problem is using jQuery children instead of searching to access the object:

Still have problems:

  jQuery ( function(){ jQuery(".slideDiv").hide(); jQuery(".mainDiv").hover ( function() { $(this).children(".slideDiv").show("slide", { direction: "left" }, 100); },function(){ $(this).children(".slideDiv").hide("slide", { direction: "left" }, 100); } ); } ); 

Works as intended:

  $(document).ready(function(){ $('.slideDiv').hide(); $('.mainDiv').hover( function(){ $(this).find('.slideDiv').show('slide', { direction: 'left' }, 100) }, function(){ $(this).find('.slideDiv').hide('slide', { direction: 'left' }, 100) } ) }) 

And yes, the hoverIntent plugin is good: P