在自己的位置上弹跳 div

Question

我正在尝试为我的div创建一个简单的弹跳效果。弹跳效果在某种程度上起作用，但我不明白为什么div 在反弹时会相互下降，这不是我想要的。我需要div 在自己的位置上弹跳。

这是小提琴

这是我的代码：

$(document).ready(function() {
    $(".balls").effect('bounce', { times: 3 }, 'slow');
});

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

Answer 1

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

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

更新的小提琴

Answer 2

使用

    float:left;

而不是

    display:inline-block;

查看更新的小提琴

Answer 3

您需要添加

display:inline

对于应该反弹的divs，检查这个小提琴

Answer 4

效果插件将您的div 包装在具有 .ui-effects-wrapper 类的div 中，并将内联浮点数 none 添加到div 中。 在 css 下面使用并使用顶级 css 属性。您需要使用以下 css：

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