问候,
我正在尝试使用jQuery为导航栏上的每个按钮创建一个简单的淡入/淡出DIV,并且我遇到了一些问题。这是我想要做的截图:
基本上,当用户将鼠标悬停在导航栏上的某个项目上时,导航下方会显示一个div,其中包含与该按钮相关的文本。到目前为止我提出的标记是可怕的,我知道这不是正确的方法,我也尝试使用数组并使用导航按钮的title属性中的文本填充info div - 后者工作得很好但是然后出现一个标题。
除了太复杂之外,它确实有效。如果用户快速地进出导航栏,则会导致整个事物闪烁(不使用:隐藏和:可见),或者如果使用: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');
});
答案 0 :(得分: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');
});
以及其他动画电话。
答案 1 :(得分:1)
我没有得到您正在谈论的闪烁,它是否发生在特定的浏览器中?我在Chrome和Firefox上测试过。
但是,我确实制作了this fiddle,以向您展示如何通过将内容与功能分开来改进代码。基本上,如果你想更新状态文本,看起来合理的地方将是HTML,而不是代码。此外,在代码中具有所有这些特定条件并不是非常可维护的。想想是否要添加或更改一些菜单项。
相反,我将状态文本移动到HTML中链接的title
属性,并让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');
});