How to perform a UI jquery effect without losing component positioning?

Question

The idea is for the div to stay at all times centered on the page, even executing the effect, and this behavior is not observed in Firefox, where the component appears vibrating on the left instead of vibrating where it is positioned (although it is ok using Chrome 35 and Internet Explorer 11).

<div id="divEsquerda" style="background-color:#ffd800; width:50%; height:200px; margin:auto;">  

</div>

<script type="text/javascript">

    $(document).ready(function () {

        $(document).click(function () {
            $("div").effect("bounce");
        });

    });

</script>

My code in the JFIDDLE

Answer 1

This behavior is specific to Firefox (tested in version 23) and apparently in previous versions of Internet Explorer (tested in version 11 and works). Chrome 35 also works ok.

Reading the comments of this reply: Jquery UI Bounce Effect aligns Elements left in Firefox and IE8, noticed a workaround that seems to work on both Firefox and Chrome and IE 10:

Instead of doing the bounce directly on div, positions it in another div (a Parent) and makes the Book in this father div. So:

Html:

<div id="parent">
    <div id="divEsquerda" 
        style="background-color:#ffd800; 
        width:50%; 
        height:200px; 
        margin-left: auto; 
        margin-right: auto">  
    </div>
</div>

Javascript:

$(document).ready(function () {

    $(document).click(function () {
        $("#parent").effect("bounce");
    });
});

Look at the Fiddle: http://jsfiddle.net/xuh67Loe/1/