jQuery Hide/Show with Slide on Hover… better way to do this?

Question

Basically having some trouble with using Hover to hide or show an item.

The idea is simple, on hover show a div. When no longer hovering, hide it. Problem is if

Answer 1

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

When I rewrote it the script the div never stays visible. So, it appears that the problem is with using jQuery's children instead of find to get to the object:

Still has 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 nice :P

Answer 2

Use the hoverIntent plugin. This avoids anything being shown if the user simply passes the mouse over the elements, and avoids an unsightly chain of animations.