jQuery的隐藏/显示与哈弗幻灯片...更好的方式来做到这一点？(jQuery Hide/Show

基本上遇到一些麻烦，使用悬停隐藏或显示的项目。

这个想法很简单，悬停显示一个div。 当不再徘徊，隐藏它。 问题是，如果将鼠标悬停在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", { direction: "left" }, 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>

Answer 1:

使用hoverIntent插件。 这避免了任何事情，如果用户只是简单地传递鼠标悬停在元件被示出，并且避免了动画的难看的链。

Answer 2:

我想你的脚本，并像你描述它没有。 我试图消除children.is（“：隐藏”），从您的脚本，但问题仍时有发生。

当我重写了它的脚本股利永远保持可见。 因此，它出现的问题是使用jQuery的孩子而找得到对象：

还是有问题：

 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);
       }
     );
   }
 );

按预期工作：

 $(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)
     }
   )
 })

是的，该hoverIntent插件是好的：P

文章来源: jQuery Hide/Show with Slide on Hover… better way to do this?