当前位置：文江博客话题详情

jQuery 原地弹跳

发布于 2024-09-14 05:57:27 字数 200 浏览 4 评论 0原文

我需要我的列表项元素弹跳到位，而不是相互掉落。

我创建了一个 JSFiddle 我的意思： http://jsfiddle.net/RGvjj/

有人可以建议我吗至于为什么这些元素会这样做以及我需要做什么来解决这个问题？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜访吸血鬼 2024-09-21 05:57:27

尝试从

中删除 inline 显示并使用 float:left 代替。

尝试一下： http://jsfiddle.net/RGvjj/1/

#navigation li {
    font-size: 20px;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 3px solid #1161A5;
    color: #ffffdd;
    text-decoration: none;
    float:left;
}

编辑：解释一下，我猜发生这种情况是因为当您为元素设置动画时，jQuery 将 display 更改为 block。因此，您最终会在 inline 元素（

;）内得到一个 block 元素（）。）这不起作用。

通过使用 float:left，

保留其 block 显示，这使其对 有效。成为块。

Try removing the inline display from the <li> and use float:left instead.

Try it out: http://jsfiddle.net/RGvjj/1/

#navigation li {
    font-size: 20px;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 3px solid #1161A5;
    color: #ffffdd;
    text-decoration: none;
    float:left;
}

EDIT: To explain, I'm guessing this is happening because when you animate an element, jQuery changes the display to block. So you were ending up with a block element (the <a>) inside an inline element (the <li>) which doesn't work.

By using float:left, the <li> retains its block display, which makes it valid for the <a> to be block.

回复收藏 0 原文

~没有更多了~