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

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

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

任何提示？

Answer 1

喜欢解决方案。

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

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

jQuery动画过早结束

1 个答案: