在自己的位置弹跳div？

Question

我试图为我的div创建一个简单的弹跳效果。弹跳效果在某种程度上起作用，但我不明白为什么当他们反弹时div会在彼此之下，这不是我想要的。我需要div在他们自己的位置反弹。

这是FIDDLE

这是我的代码：

var element = document.getElementById("gender");
var gender = element.options[element.selectedIndex].value;

弹跳效果在页面加载时启动。任何帮助将不胜感激。

Answer 1

问题是因为库正在每个div元素周围添加一个包含.balls元素，默认情况下为display: block，因此每个元素都被推送到它自己的行。当动画结束时，此元素将被删除，并返回坐在同一行。要解决此问题，您只需将此规则添加到CSS：

.ui-effects-wrapper {
    display: inline-block;
}

Updated fiddle

Answer 2

使用

    float:left;

而不是

    display:inline-block;

check out the updated fiddle

Answer 3

你需要添加

display:inline

到应该反弹的divs，请检查此fiddle

Answer 4

效果插件将你的div包装在具有.ui-effects-wrapper类的div中，并在div中添加inline float none。使用下面的CSS并使用顶级css属性。你需要使用下面的css：

.ui-effects-wrapper{float:left!important;}