4

问候，

我正在尝试使用 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');
            });
4

2 回答 2

2

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

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

以及其他动画调用。

于 2011-01-20T04:10:40.167 回答
1

我不明白你在谈论的闪烁，它是否发生在特定的浏览器中？我在 Chrome 和 Firefox 上进行了测试。

但是，我确实制作了这个小提琴，以便向您展示如何通过将内容与功能分离来改进代码。基本上，如果您想更新状态文本，最好在 HTML 中查看，而不是在代码中。此外，在代码中包含所有这些特定条件不是很容易维护。想想您是否想添加或更改一些菜单项。

相反，我将状态文本移动到titleHTML 中链接的属性，并让 jQuery 读取该属性以获取文本。这也将 jQuery 代码的前 15 行减少到 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');
});
于 2011-01-20T04:09:00.943 回答