如何使用 jQuery 在菜单悬停时创建滑动动画?
Posted
技术标签:
【中文标题】如何使用 jQuery 在菜单悬停时创建滑动动画?【英文标题】:How to create a sliding animation on menu hover with jQuery? 【发布时间】:2012-06-19 16:35:18 【问题描述】:我在很多网站上都看到了这一点,但我不确定我是否能够解释它。
导航中有时会有滑动元素,就像用户将鼠标悬停在不同菜单链接上时滑动的菜单项下的箭头等。
这是一个简单的菜单:
<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:
http://jsfiddle.net/8EvhK/
悬停时按钮背景变为红色。我希望这个背景在我悬停时在这些按钮之间滑动和变换(宽度)。
如何做这样的事情?我一直在寻找教程,但没有运气。
非常感谢!
【问题讨论】:
顺便说一句,大多数时候你可以使用$
而不是jQuery
。 IE。 $("a").removeClass("active");
顺便说一下,像您的示例这样的悬停效果应该始终使用 CSS 而不是 javascript。
【参考方案1】:
使用 jquery 的 append
向菜单添加一个元素。
$('ul').append('<div id="slider"></div>');
在任何菜单项的hover
上,animate
这个新元素到触发事件的菜单项的水平position
和width
。
$('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/
【讨论】:
修复:jsfiddle.net/5wPQa/1因为边框有1px的宽度,需要向左加1px @Puyol:很好看!我用另一个通过 CSS 修复它的版本编辑了我的答案。 随时。您可以将 jquery 事件hover
更改为 mouseenter
以获得更好的性能,因为如果鼠标离开此处不需要的元素,hover
也会触发。但这没关系,因为此脚本与性能无关。【参考方案2】:
你可以用CSS transitions实现这个效果:
ul li
display:block;
padding: 5px 15px;
background-color: #333;
color: #fff;
text-decoration: none;
width:50%;
-moz-transition: width 1s; /* Firefox 4 */
-webkit-transition: width 1s; /* Safari and Chrome */
-o-transition: width 1s; /* Opera */
ul li:hover
width:100%;
Here is an example.
【讨论】:
以上是关于如何使用 jQuery 在菜单悬停时创建滑动动画?的主要内容,如果未能解决你的问题,请参考以下文章