jQuery的隐藏/显示与哈弗幻灯片...更好的方式来做到这一点？ [英] jQuery Hide/Show with Slide on Hover... better way to do this?

问题描述

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

的想法很简单，悬停显示一个div。当不再徘徊，隐藏它。问题是，如果将鼠标悬停在div和叶过快，显示/隐藏格将保持可见。我希望这是一件很容易纠正，而不是一个典型的问题与悬停事件。

 的jQuery
 （
   功能（）
   {
     。jQuery的（slideDiv），隐藏（）;     jQuery的（mainDiv）。悬停
     （
       功能（）
       {
         VAR孩子= jQuery的（本）。儿童（sl​​ideDiv。）;         如果（children.is（：隐藏））
         {
           children.show（幻灯片，{方向：左}，100）;
         }
       }，
       功能（）
       {
          VAR孩子= jQuery的（本）。儿童（sl​​ideDiv。）;
          children.hide（幻灯片，{方向：左}，100）;
       }
     ）;
   }
 ）;
 

样式如下：

  .mainDiv
 {
   保证金：5像素;
   高度：200像素;
 } .slideDiv
 {
   背景色：水鸭;
   浮动：左;
   高度：200像素;
   位置：绝对的;
   的z-index：100;
 }
 

和标记

 ＆LT; D​​IV CLASS =mainDiv＆GT;
        ＆LT; D​​IV CLASS =showDiv＆GT;
            我悬停
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =slideDiv＆GT;
            你看得到我吗？
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =清除＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =mainDiv＆GT;
        ＆LT; D​​IV CLASS =showDiv＆GT;
            悬停我也是
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =slideDiv＆GT;
            你现在看到我吗？
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

解决方案

使用 hoverIntent 插件。这样就避免了任何东西，如果用户只需通过鼠标在元素被显示，并避免动画难看链。

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 the mouse hovers over the div and leaves too quickly, the show/hide div will stay visible. I'm hoping this is something easily remedied and not a typical problem with the hover event.

 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:

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

解决方案

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.

这篇关于jQuery的隐藏/显示与哈弗幻灯片...更好的方式来做到这一点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！