Javascript jQuery动画过早结束

我对jQuery动画有点小问题

我有以下HTML：

<div id="menu">
    <a id="menu-about" href="/">A riguardo...</a><br />
    <a id="menu-ask" href="/">Fammi una domanda</a><br />
    <a id="menu-archive" href="/">Sfoglia l'archivio</a><br />
    <a id="menu-vcard" href="/">La mia vCard</a><br />
    <a id="menu-lifestream" href="/">Il mio lifestream</a><br />
</div>

动画如下所示：

$(function start_menu_effect() {
    $("div#menu a").hover(function (){
        $(this).stop().animate({'marginLeft': '-' + ($(this).width() + 52) + 'px'}, 400);
    },
    function (){
        $(this).stop().animate({'marginLeft': '-42px'}, 400);
    });
});

问题是动画过早结束。动画功能在达到完全边距之前停止。此外，动画可以在菜单返回到原始位置之前完成鼠标的取消悬停和重新悬停

编辑-问题似乎与宽度有关，这是不正确的。我制作了一把小提琴来演示问题：

有什么提示吗？

找到解决方案

容器div放置在文档外部时（左：100%），不会像正常放置时那样展开自身，因为它没有最右边的边距作为参考。因此，有必要设置一个固定的宽度，以使内部元素正常扩展并获得正确的宽度。显然，div宽度必须大于内部元素，然后我们需要使用一个适当的值

这是一种工作提琴，其div宽度为500px:

是一种解决方案

容器div放置在文档外部时（左：100%），不会像正常放置时那样展开自身，因为它没有最右边的边距作为参考。因此，有必要设置一个固定的宽度，以使内部元素正常扩展并获得正确的宽度。显然，div宽度必须大于内部元素，然后我们需要使用一个适当的值

---

这是div宽度为500px的工作小提琴：

您是否尝试过

。stop（true，true）

可能是此链接将帮助您停止（）或stop（true，false）是我的菜单所需的。我还尝试了其他组合来解决这个问题，但没有成功。嗯，上次测试告诉我宽度不正确。奇怪的是，获得的宽度对于所有项目都是相同的。还在调查！请使用jsfiddle.net。这是提出实际问题并期望得到好答案的更好方式。祝你好运您是否尝试过

.stop（true，true）

可能此链接将帮助您停止（）或者我的菜单需要停止（true，false）。我还尝试了其他组合来解决这个问题，但没有成功。嗯，上次测试告诉我宽度不正确。奇怪的是，获得的宽度对于所有项目都是相同的。还在调查！请使用jsfiddle.net。这是提出实际问题并期望得到好答案的更好方式。祝你好运

$(function start_menu_effect() {
    $("div#menu a").hover(function (){
        $(this).stop().animate({'marginLeft': '-' + ($(this).width() + 52) + 'px'}, 400);
    },
    function (){
        $(this).stop().animate({'marginLeft': '-42px'}, 400);
    });
});