鼠标悬停时的jquery滑块+在选择时保持活动状态

Question

我正在导航，我想在鼠标悬停在链接上时添加一些动画，下面的形状箭头会滑动到该链接并在页面被激活时保持活动状态

这是一个例子

导航代码

<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 部分的帮助，有什么想法可以让它工作吗？

Answer 1

$('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.
   });

});

Answer 2

检查一下

$('nav ul li').hover(function(){ 

  $('#arrow').offset({left:$(this).offset().left});

},function(){

  $('#arrow').offset({left:$('nav ul li').eq(0).offset().left});

});