Bouncing divs in their own place?

Question

I'm trying to create a simple bouncing effect for my divs. The bouncing effect works in a way but I don't get why the divs go under each-other when they bounce which is not what I want. I need the divs to bounce in their own place.

This is the FIDDLE

And this is the my code:

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

The bouncing effect kicks in on page load. Any help would be appreciated.

Answer 1

The issue is because the library is adding a containing div element around each .balls element which is by default display: block, hence each element is pushed to it's own line. When the animation ends this element is removed and they return to sitting on the same line. To fix this you just need to add this rule to your CSS:

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

Updated fiddle