Jquery：设置动画到另一个对象的中心

我试图建立一个导航滑块，这就像一个箭头下的导航链接滑动。我想动画它的一个div的中心

这是我的导航代码：

<nav>

        <ul class="tabs">
            <li id="tab1"><a href="#">Cursussen</a></li>
            <li id="tab2"><a href="#">Resultaten</a></li>
            <li id="tab3"><a href="#">Inbox</a></li>
            <li id="tab4"><a href="#">Profiel</a></li>
            <li id="tab5"><a href="#">Aanbod</a></li>
        </ul>

        <a id='slider'><img src="img/arrow.png"></a>

</nav>

我想我可以创建一个如下所示的var，它计算我想移动到中心的div的宽度。但我不知道如何为动画部分编写代码

var w = '$(#slider).parent().width()'/2

---

请试试这个js小提琴：

我特别使用了以下方法：

$('ul.tabs li').click(function(event){

    event.preventDefault();

    var ulOffsetLeft = $('ul.tabs').offset().left;
    var currentOffset = $(this).offset().left;

    var delta = currentOffset - ulOffsetLeft;

    $('#slider').clearQueue().animate({'margin-left': delta});

});​

更新：我在这个新提琴上添加了一些自动填充计算：

---

var w=parseInt（$（“#滑块”）.parent（）.width（），10）/2

谢谢您！虽然我似乎不能让它工作。滑块箭头在那里，但它一点也不动。有什么我遗漏的吗？顺便说一句：我对创建自己的代码有点陌生。我通常做的是编辑其他人创建的代码。你有没有点击下面的JS fiddle链接？如果是，您是否确保单击左上角的“运行”？还是你在说你复制的代码？我试着把你的代码复制到我的文件中。但我不明白为什么它不起作用。它以前工作过，但只有当我为动画左放弃一个数字。我希望它能自动工作。这是我创建它时的一堆代码。包括我使用的“标签”的jquery插件。我还没有把你的代码整合到这里面。当我测试它时，我做的是删除我的函数并用你的函数替换它。我可能做错了什么。可能很简单，但我看不出是什么。。那个似乎在滑动。你的CSS配置很奇怪。

$('ul.tabs li').click(function(event){

    event.preventDefault();

    var ulOffsetLeft = $('ul.tabs').offset().left;
    var currentOffset = $(this).offset().left;

    var delta = currentOffset - ulOffsetLeft;

    $('#slider').clearQueue().animate({'margin-left': delta});

});​