jQuery弹跳式位置动画

Question

jQuery弹跳式位置动画

jqueryhtmlcssinlinebounce

3

我希望我的列表项元素可以在原地弹跳而不会互相碰撞。

我创建了一个 JSFiddle 演示了我所说的内容: http://jsfiddle.net/RGvjj/

请问有谁能指导我为什么这些元素会这样，并告诉我需要怎么做才能解决这个问题吗？

- maletor

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user113716 · Accepted Answer

尝试将<li>的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。因此，您最终得到的是一个块级元素（<a>）位于一个内联元素（<li>）中，这是不起作用的。

通过使用float:left，<li>保留其块级显示，这使得<a>成为有效的块级元素。