javascript - jQuery 动画提前结束

Question

我有一个 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>

样式为:

div#menu {
    position: fixed;
    bottom: 0;
    left: 100%;
    padding: 0;
}

div#menu a {
    display: inline-block;
    height: 20px;
    margin: 0 0 10px -42px;
    padding: 6px 0 6px 42px;
    line-height: 20px;
    font: bold 20px "Arial", Helvetica, sans-serif;
    color: #263F51;
    text-shadow: 0 -1px 0 #213441, 0 1px 1px #668EAA;
    text-align: left;
    text-transform: uppercase;
}

div#menu a:hover {
    text-decoration: none;
}

div#menu a#menu-about { background: url(../img/layout/bg-menu-about.png) no-repeat left center; }
div#menu a#menu-ask { background: url(../img/layout/bg-menu-ask.png) no-repeat left center; }
div#menu a#menu-archive { background: url(../img/layout/bg-menu-archive.png) no-repeat left center; }
div#menu a#menu-vcard { background: url(../img/layout/bg-menu-vcard.png) no-repeat left center; }
div#menu a#menu-lifestream { background: url(../img/layout/bg-menu-lifestream.png) no-repeat left center; }

动画如下:

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

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

编辑 - 问题似乎与宽度有关，但这是不正确的。我创建了一个 fiddle 来演示问题: http://jsfiddle.net/cyrusza/fJCyn/

有什么提示吗？

Answer 1

喜欢一个解决方案。

容器 div 放置在文档外部时(左:100%)，不会像在正常放置时那样自行扩展，因为它没有最右边的边距作为引用。因此需要设置一个固定的宽度，让内部元素正常展开，得到正确的宽度。显然div宽度必须大于内部元素，那么我们需要使用一个足够的值。

这是 div 宽度为 500px 的工作 fiddle :http://jsfiddle.net/cyrusza/fJCyn/2/