jQuery隐藏/显示幻灯片悬停…更好的方法来做到这一点？

使用Hover隐藏或显示项目时基本上遇到了一些麻烦.

这个想法很简单,在悬停时显示一个div.当不再盘旋时,隐藏它.问题是如果鼠标悬停在div上并且离开太快,show / hide div将保持可见.我希望这可以很容易地解决,而不是悬停事件的典型问题.

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",100);
       }
     );
   }
 );

样式看起来像：

.mainDiv
 {
   margin:5px;
   height:200px;
 }

 .slideDiv
 {
   background-color:teal;
   float:left;
   height:200px;
   position:absolute;
   z-index:100;
 }

和标记

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

解决方法

使用 hoverIntent插件.如果用户只是将鼠标悬停在元素上,则可以避免显示任何内容,并避免出现难看的动画链.