Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bouncing divs in their own place?

Tags:

jquery

css

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.

like image 720
rooz Avatar asked Mar 13 '23 11:03

rooz


1 Answers

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

like image 195
Rory McCrossan Avatar answered Apr 05 '23 15:04

Rory McCrossan