jQuery UI - bounce - div jumping from left to right

Question

I have a problem with my site, where I am using jQuery with jQuery UI on it, to create a bounce effect on the login box.

However, I have a problem with the div with the login boxes in, as it bounces on the left side of the screen, when it should bounce in the middle, where it also jumps in when it is done bouncing.

I have created a JSFiddle to demonstrate it: http://jsfiddle.net/prooi/GqyfX/

If you could take a look, and give me some idea of why it is behaving like that, it would be awesome.

Thanks in advance.

Answer 1

Insert another div in container and apply the jquery code on that i.e.

<div id="container">
  <div id="nested"> 
     <!-- Your Existing Html Markup -->
  </div>
</div>

and apply the jquery code on nested div i.e

$(document).ready(function() {
  $("#nested").effect('bounce', 250);
});

The problem will get resolved :)