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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With