基于导航栏淡入淡出DIV

Question

你好，

我正在尝试使用jQuery制作一个简单的淡入淡出DIV并为导航栏上的每个按钮添加文本，但遇到了一些问题。以下是我想要实现的截图：

基本上，当用户将鼠标悬停在导航栏上的项目上时，一个DIV将出现在导航栏下方，并显示与该按钮相关的文本。到目前为止，我想出来的标记非常糟糕，我知道这不是正确的做法，我还尝试使用数组并使用导航按钮的标题属性填充信息div中的文本，后者效果很好，但标题也会出现。

除了太复杂之外，它确实可以工作...到一定程度。如果用户快速地在导航栏上悬停和移开鼠标，则会导致整个内容闪烁（不使用:hidden和:visible），或者如果使用了:hidden和:visible则不会出现。

以下是当前的标记：

信息DIV的CSS

#header-info-text {
    width: 480px;
    text-align: right;
    float: right;
    margin-right: 20px;
    padding-right:  25px;
    background: url('/images/info-arrow.png') top right no-repeat transparent scroll;
    color: #fff;
    display: none;
}

导航栏的HTML代码

<div id="navBar">
      <ul>
          <li class="nav-first nav-active"><a href="#">Home</a></li>
          <li id="navAbout"><a href="#">About</a></li>
          <li id="navPort"><a href="#">Portfolio</a></li>
          <li id="navServ"><a href="#">Services</a></li>
          <li id="navBlog"><a href="#">Blog</a></li>
          <li id="navContact" class="nav-last"><a href="#">Contact</a></li>
      </ul>
</div>
<div id="header-infoDIV">
      <span id="header-info-text"></span>
 </div>

Javascript

$("#navBar ul li").hover(function() {
     var text;
     var id = $(this).attr('id');
     if (id == 'navAbout') {
     text = 'Learn more ..';
     } else if (id == 'navPort') {
      text = 'View our recent work and ongoing projects';
      } else if (id == 'navServ') {
      text = 'Learn about our services';
      } else if (id == 'navBlog') {
      text = 'View the our Blog';
      } else if (id == 'navContact') {
      text = 'We\'re looking forward to working with you!';
      } else {
      text = '';
       }
      $("#header-info-text").text(text);
      $("#header-info-text:hidden").fadeIn('slow');
      });
            $("#navBar ul").hover(function() {
                $("#header-info-text:hidden").fadeIn('slow');
            }, function() {
                $("#header-info-text:visible").delay(500).fadeOut('slow');
            });

什么是最好的方法来解决这种问题？基本上，我想淡入信息文本的DIV，在用户移动到另一个按钮时更改其文本，并在他们移出导航栏时隐藏它。

谢谢！

解决方案（感谢jmans）：

 $("#navBar ul").hover(function() {
        $("#header-info-text").stop(true,true).fadeIn('slow');
    }, function() {
        $("#header-info-text").stop(true,true).delay(500).fadeOut('slow');
    });

更新 感谢mVChr的建议，代码已经简化为几行。结合jmans提供的建议，它正在做我想要的事情：

$("#navBar ul li a").hover(function() {
                var text = $(this).attr('rel');
                $("#header-info-text").text(text);
                $("#header-info-text").stop(true,true).fadeIn('slow');
            },
            function() { 
               $("#header-info-text").stop(true,true).delay(500).fadeOut('slow');
            });

- NightMICU

---

+1 鼓励你追踪你的问题.. :) - Reigel Gallarde

Answer 1

您可以尝试使用stop()方法来停止任何正在进行的动画，当鼠标悬停状态改变时：

        $("#navBar ul").hover(function() {
            $("#header-info-text:hidden").stop(true,true).fadeIn('slow');
        }, function() {
            $("#header-info-text:visible").stop(true,true).fadeOut('slow');
        });

除此之外，还有其他动画调用。

- jmans

---

运行得非常好！为fadeOut添加了延迟，显然这个部分在我的原始代码中被遗漏了。非常感谢！ - NightMICU

Answer 2

我不明白你所说的闪烁是什么意思，它只在特定的浏览器上发生吗？我在Chrome和Firefox上进行了测试。

然而，我制作了this fiddle以向您展示如何通过将内容与功能分离来改进代码。基本上，如果您想要更新状态文本，合理的地方应该是在HTML中而不是在代码中查找。此外，在代码中具有所有这些特定条件语句并不易于维护。想象一下，如果您想要添加或更改几个菜单项。

相反，我将状态文本移动到HTML链接的title属性中，并让jQuery读取该属性以获取文本。这也将您的前15行jQuery代码减少为6行：

$("#navBar ul li a").hover(function() {
    var text = $(this).attr('title');
    var id = $(this).attr('id');
    $("#header-info-text").text(text);
    $("#header-info-text:hidden").fadeIn('slow');
});

- mVChr

---

具有讽刺意味的是，那正是我在我的问题中苦思冥想后想出来的完全相同的代码。我遇到的唯一问题是标题出现在导航按钮上，非常突兀和多余。但从脚本编写的角度来看，这将是最好的解决方案。而且它并不会产生太多闪烁 - 基本上，每次调用.hover()时都会重复fadeIn和fadeOut。 - NightMICU

如果你想避免标题悬停在菜单上方，那么你可以使用rel属性，而不是仅仅更改第二行使用attr('rel')。如果你再次遇到不需要的动画重复问题，请查看jQuery API文档中的.stop()方法。 - mVChr

当然！太棒了！感谢您的帮助，结合其他答案，它正按照我想要的方式工作。 - NightMICU