我在很多网站上看过这个,但我不确定我是否能够解释它.
有时在导航中有滑动元素,就像用户将鼠标悬停在不同菜单链接上时滑动的菜单项下的箭头一样.
这是一个简单的菜单：
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link number 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link something 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
还有一些jQuery(我知道我可以通过简单的css获得相同的效果：悬停)：
jQuery('ul li a').hover(function() {
jQuery('a').removeClass('active');
jQuery(this).addClass('active');
});
另外,工作jsfiddle：
按钮背景在悬停时变为红色.我希望这个背景在我悬停时在这些按钮之间滑动和变换(宽度).
怎么做那样的事情？我一直在寻找教程,但没有运气.
非常感谢！
解决方法
>使用jquery的追加向菜单添加元素.
$('ul').append('<div id="slider"></div>');
>在悬停任何菜单项时,将此新元素设置为触发事件的菜单项的水平位置和宽度.
$('ul li a').hover(function(){
var left = $(this).parent().position().left;
var width = $(this).width();
$('#slider').stop().animate({
'left' : left,'width' : width
});
});
>将滑块重置为其初始状态.
var left = $('ul li:first-child a').parent().position().left;
var width = $('ul li:first-child a').width();
$('#slider').css({'left' : left,'width' : width});
>添加一些CSS.
#slider {
position:absolute;
top: -5px;
left: 0;
height: 100%;
width: 0;
padding: 5px 15px;
background-color: #f00;
z-index:-1;
}
这是一个工作小提琴：http://jsfiddle.net/5wPQa/2/
