我正在使用导航,我想在鼠标悬停在链接上时添加一些动画,下面的形状箭头会滑动到该链接并在页面激活时保持事件状态
导航代码
<nav>
<ul>
<li><span id="arrow"></span><a class="home" href=""><i class="material-icons nav-icon-home">home</i></a></li>
<li><a id="a-b" href=""><i class="material-icons nav-icon">build</i>SERVICES</a></li>
<li><a id="a-c" href=""><i class="material-icons nav-icon">people</i>ABOUT US</a></li>
<li><a id="a-d" href=""><i class="material-icons nav-icon">email</i>CONTACT US</a></li>
<li><a id="a-e" href=""><i class="material-icons nav-icon">work</i>CAREERS</a></li>
</ul>
箭头CSS代码
#arrow {
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #FFFFFF;
top: 55px;
z-index: 100;
}
我只需要 jquery 部分的帮助,有什么想法可以让它正常工作吗?
最佳答案
$('nav ul li').hover(function(){
$('#arrow').stop().animate({
left: $(this).offset().left+'px'
}, 300, function() {
// Animation complete.
});
},function(){
$('#arrow').stop().animate({
left: $('nav ul li').eq(0).offset().left+'px'
}, 300, function() {
// Animation complete.
});
});
关于javascript - 鼠标悬停时的 jquery slider + 在选择时保持事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34377766/