jquery - 在自己的位置弹跳 div？

Question

我正在尝试为我的 div 创建一个简单的弹跳效果。弹跳效果以某种方式起作用，但我不明白为什么 div 在弹跳时会彼此重叠，这不是我想要的。我需要 div 在它们自己的位置弹跳。

这是 FIDDLE

这是我的代码:

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

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

Answer 1

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

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

Updated fiddle