Javascript将div动画化到其他div的位置？

好吧，所以我还没有找到一个适合我所寻找的答案。我需要一个简单的脚本，可以动画一个彩色的div到一个菜单选择或导航按钮的位置。我希望它动画化到光标悬停的div位置，但我不希望它跟随光标，我只希望它滑动到菜单上文本的一部分，作为高亮显示或选择器。这是一个JSFiddle。哦，还有一件事。我想突出显示滑回其原始位置（选定的菜单项）后，菜单已被悬停关闭。示例：（如果选择了“关于”，并且悬停了“主页”，则滑动到“主页”，但如果悬停而未选择，则滑回“关于”）。非常感谢您的帮助

var main=function（）{
$（'.menu-item1'）。悬停（函数（）{
$（'.hover'）。设置动画({
左：“”
});
});
}
$（文件）.ready（主）；
/*
我不得不删除一些按钮以适应JSFIDLE页面，但我想将突出显示幻灯片放到每个选择的位置。我还希望它符合按钮的大小（宽度）。如果它能自动完成所有的动画，那也太好了。我的意思是，高亮显示会自动地符合按钮的大小，而不是有固定的宽度和位置来滑动（这将允许我更改菜单的文本，而不必更改任何javascript）。
*/

/*初始正文*/
身体{
左：0；
保证金：0；
溢出：隐藏；
位置：相对位置；
}
/*初始菜单*/
.菜单{
位置：固定；
左：30%；
右：30%；
宽度：40%；
文本对齐：居中；
背景色：黑色；
左侧填充：10px；
右边填充：10px；
-webkit变换：倾斜（20度）；
-moz变换：倾斜（20度）；
-o变换：倾斜（20度）；
}
/*基本造型*/
.内容{
背景色：#E0；
身高：100%；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.菜单ul{
列表样式：无；
保证金：0；
左侧填充：5px；
右侧填充：5px；
-webkit变换：倾斜（-20度）；
-moz变换：倾斜（-20度）；
-o变换：倾斜（-20度）；
}
.悬停{
身高：100%；
宽度：100px；
背景色：#303030；
位置：绝对位置；
左边距：30px；
}
李先生{
字体系列：“开放式Sans”，无衬线；
线高：45px；
垫底：3件；
左侧填充：30px；
右侧填充：30px；
垫面：3件；
显示：内联
}
.菜单a{
颜色：#fff；
字体大小：15px；
文字装饰：无；
文本转换：大写；
}
.图标关闭{
光标：指针；
左侧填充：10px；
填充顶部：10px；
}
.图标菜单{
颜色：#fff；
光标：指针；
字体系列：“开放式Sans”，无衬线；
字体大小：16px；
垫底：25px；
左侧填充：25px；
填充顶部：25px；
文字装饰：无；
文本转换：大写；
}
.图标菜单i{
右边距：5px；
}
h1{
顶部：80px；
位置：绝对位置
}

全屏显示正确形式的菜单

也许是这样的

Javascript

var main = function() {
  $('.menu-item').hover(function() {
    var $el = $(this);
  $('.hover').animate({
      left: $el.offset().left - $('.menu').offset().left
  });
});

$('.hover').css({
    left: $('.menu-item:first').offset().left - $('.menu').offset().left
});
}

---

为所有菜单项赋予相同的类，然后将事件目标（您悬停在其上的菜单项）的

偏移量

传递到动画调用中

更新小提琴：

var main=函数（）{
$（'.menu项'）。悬停（函数（）{
var=这个；
$（'.hover'）。设置动画({
左图：那个。偏移左
});
});
}

这就是我放弃之前所得到的。我需要它找到菜单中文本的中心，我还需要它符合或更改其宽度，以适应其中的文本，并且每个菜单项的每一侧都有相同的填充量。我还注意到，在这一点上，如果你在菜单上运行光标，你可能会混淆滑块很多时候，它会继续运行大约5-10个移动，然后停止，即使光标离开文本。所以你在正确的轨道上，你有这个想法，但它只是需要一点调整。谢谢你，我在这方面还是新手。PS：你介意解释代码是如何工作的吗？我很想更好地了解它是如何工作的appens将在将来帮助我学习更多JavaScript

<li class='menu-item'><a href="#">Home</a></li>
<li class='menu-item'><a href="#">Gallery</a></li>

var main = function() {
    $('.menu-item').hover(function() {
      var that = this;
      $('.hover').animate({
          left: that.offsetLeft
      });
    });
}