jQuery Hide/Show with Slide on Hover...更好的方法来做到这一点？

Posted 2023-05-08

【中文标题】jQuery Hide/Show with Slide on Hover...更好的方法来做到这一点？

【英文标题】：jQuery Hide/Show with Slide on Hover... better way to do this?

【发布时间】：2010-11-09 11:58:21

【问题描述】：

使用 Hover 隐藏或显示项目基本上会遇到一些问题。

这个想法很简单，在悬停时显示一个 div。当不再悬停时，将其隐藏。问题是如果鼠标悬停在 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>

【参考方案1】：

使用hoverIntent 插件。如果用户只是将鼠标移到元素上，这可以避免显示任何内容，并避免出现难看的动画链。

【讨论】：

+1 让我接触到 hoverIntent 插件，这就是我来这里浏览 jQuery 线程的原因。我学到了很多很酷的技巧。

这个看起来不错，我会用这个插件的！

【参考方案2】：

我尝试了您的脚本，它确实按照您的描述进行。我尝试从您的脚本中删除 children.is(":hidden") ，但问题仍然存在。

当我重写脚本时，div 永远不会保持可见。因此，问题似乎在于使用 jQuery 的 children 而不是 find 来获取对象：

还有问题：

 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