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>
样式为：
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/< /a>
有什么提示吗？
I have a little problem with a jQuery animation.
I have the following 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>
Styled as:
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; }
The animation is the following:
$(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);
});
});
The problem is that the animation ends prematurely. The animate function stops before reaching the full margin. Furthermore, the animation can be completed de-hovering and re-hovering the mouse before the menu returns to the original position...
EDIT - the problem seems to be related to the width, that isn't correct. I create a fiddle to demonstrate the problem: http://jsfiddle.net/cyrusza/fJCyn/
Any hints?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
寻找解决方案。
当容器 div 放置在文档外部时（左侧：100%），它不会像正常放置时那样自行展开，因为它没有最右边的边距作为参考。因此需要设置一个固定的宽度，让内部元素正常展开，得到正确的宽度。显然div的宽度必须大于内部元素，那么我们需要使用一个足够的值。
这是div宽度为500px的工作小提琴： http://jsfiddle.net/cyrusza/fJCyn/ 2/
Fond a solution.
The container div, when placed outside of the document (left: 100%), doesn't expand itself as it would in a normal placement, because it hasn't the rightmost margin as reference. Therefore is necessary to set a fixed width to let the inner elements expand normally and get a correct width. Obviously the div width must be bigger than the inner elements, then we need to use an adequate value.
This is the working fiddle with a div width of 500px: http://jsfiddle.net/cyrusza/fJCyn/2/