jQuery反弹到位 [英] jQuery Bounce In Place

问题描述

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

有人可能建议

解决方案

尝试删除<$ c并从< li> 显示$ c> 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更改显示到块。所以你最终得到一个内的块元素（< a> inline 元素（< li> ）不起作用。

使用 float：left ，< li> 保留其块显示，这使得它对于< a> 是 block 。

I need my list item elements to bounce in place and not fall all over each other.

I created a JSFiddle of what I mean: http://jsfiddle.net/RGvjj/

Can someone advise me as to why the elements are doing that and what I need to do to fix that?

解决方案

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.

这篇关于jQuery反弹到位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！