Javascript jQuery-动画菜单活动图标

活动类在列表项上方显示一个点图标。我希望这样，当你悬停在另一个列表项上时，图标会向左或向右滑动，并在正确的位置停止

我已经添加了JS来关闭活动类，并将其添加到当前悬停的项目中，但是非常感谢在设置此转换动画方面的帮助

小提琴：

---

为了得到你想要的效果，也就是说：点移动到另一个元素，你需要创建一个额外的元素，它将移动到你悬停的地方

因此，我建议采取以下措施：

$('ul li').hover( function() {
    var acl = $(this).offset();
    var aw = $(this).width();
    var ll = acl.left + parseInt( aw / 2 );
    var tt = acl.top - 8;
    $('#active').animate({
            left : ll + 'px',
            top : tt + 'px' 
        });
});

以下是完整的示例：

---

这就是您想要实现的吗？

最好的方法是将“left”属性替换为“marginLeft”属性。 您将看到差异并相应地设置pad/margin

---

玩得开心。

你必须在你的css中添加这些样式，然后它才会有动画效果

header .desktop-menu .nav nav ul{
    position:absolute;
}
header .desktop-menu .nav nav ul li{
  position:relative;
}

---

我仍然有一个问题，当页面加载时位置显示不正确。活动div正好位于活动列表项的左侧，而不是其宽度的一半。当我将鼠标移到上面时，这已更正。另外，你知道如何更改动画的持续时间吗？我的代码中有一个输入错误。现在，这项工作非常有效。我最新的小提琴：非常感谢！

header .desktop-menu .nav nav ul{
    position:absolute;
}
header .desktop-menu .nav nav ul li{
  position:relative;
}