我正在创建一个导航栏,并且我试图添加此效果:当您将鼠标悬停在主菜单项上时,其下的每个子菜单项都会略有延迟。像一个接一个。
我有点做过,但它非常错。有时延迟时间太长,有时第二个子项目出现在第一个子项目之前!最糟糕的是,当你将鼠标从主项目上移开时,它下面的列表就会消失!总而言之,它不是很顺利。这是我现在的代码。
HTML
<div id="navbar">
<ul id="main-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Members</a>
<ul>
<li><a href="#">Sub item 1</a></li>
<li><a href="#">Sub item 2</a></li>
</ul>
</li>
<li><a href="#">Events</a>
<ul>
<li><a href="#">Sub item 3</a></li>
<li><a href="#">Sub item 4</a></li>
</ul>
</li>
<li><a href="#">Publications</a>
<ul>
<li><a href="#">Sub item 5</a></li>
<li><a href="#">Sub item 6</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
CSS
#navbar { width:550px; height:30px; position:relative; float:right; right:-7px; top:30px; }
#main-menu { width:100%; float:right; list-style:none; }
#main-menu li { float:left; }
#main-menu li a { display:block; text-decoration:none; color:#000; background-color:#FC0; padding:8px; margin-right:10px; }
#main-menu li ul { display:none; z-index:999; }
#main-menu li:hover ul { display:block; position:absolute; }
#main-menu li li { display:block; float:none; }
的jQuery
$(document).ready(function(e) {
$('#main-menu li a').hover(function()
{
$(this).animate({
backgroundColor : '#C60'
},200);
$('#main-menu ul li').each(function(e) {
$(this).delay(e * 200).hide().fadeIn(200);
});
}, function(){
$(this).animate({
backgroundColor : '#FC0'
},200);
});
});
请在此处查看this小提琴。
我怎样才能使它成为一个平滑,实用的?
答案 0 :(得分:1)
我会使用CSS过渡来淡入菜单项(并设置背景颜色)。您需要做的就是在第一次加载时使用jQuery计算每个子li的转换延迟。例如:
$('#main-menu li ul li').each(function() {
var delay = $(this).index() * 200 + 'ms';
$(this).css({
'-webkit-transition-delay': delay,
'-moz-transition-delay': delay,
'-o-transition-delay': delay,
'transition-delay': delay
});
});
然后在元素上设置适当的过渡。这是一个有效的jsFiddle:http://jsfiddle.net/Hjxp5/8/