我在很多网站上看到过这个,但我不确定我是否能够解释它。
有时导航中会有滑动元素,例如菜单项下的箭头,当用户将鼠标悬停在不同的菜单链接上时会滑动等。
这是一个简单的菜单:
<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 获得同样的效果 :hover):
jQuery('ul li a').hover(function() {
jQuery('a').removeClass('active');
jQuery(this).addClass('active');
});
此外,工作 jsfiddle:
悬停时按钮背景变为红色。我希望这个背景在我悬停时在这些按钮之间滑动和变换(宽度)。
如何做这样的事情?我一直在寻找教程,但没有找到。
非常感谢!
最佳答案
使用 jquery 的
append
将元素添加到菜单。$('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 }); });
将 slider 重置为其初始状态。
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; }
这是一个有效的 fiddle :http://jsfiddle.net/5wPQa/2/
关于javascript - 如何使用 jQuery 在菜单悬停时创建滑动动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11070453/