jQuery UI Shake Effect disables "position:absolute" (Chrome, Opera, IE)

Question

I want to use the jQuery UI shake effect in combination with the CSS style position: absolute, but that just works in Firefox. In all other browsers the effect interrupts the CSS style.

I want that the div is horizontally and vertically aligned and that the shake effect works without disabling the position: absolute. But I can't get it working.

Here is my JSFIDDLE.

<div class="toggle"></div>

.toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background: #ccc;
}

$(".toggle").click(function () {
    $(this).effect("shake", {
        direction: "left",
        times: 4,
        distance: 5
    }, 30);
});

Answer 1

Okey, I got it. I add a holder around the <div class="toggle"></div> and set them to the vertical and horizontal center. Therefore I can delete the "position:absolute" on my <div class="toggle"></div> and the ui effect stops to interrupt.

BTW: The Shake-Effect doesn't disable the "position:absolute", but it creates a new div around the shaking element, which is called <div class="ui-effects-wrapper" style="...">...</div>

Here is the final code, which works on every browser. JSFIDDLE

HTML

   <div class="holder">
     <div class="toggle"></div>
   </div>

CSS

 .holder {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     width: 100px;
     height: 100px;
     overflow:visible;
 }

 .toggle {
     width:100px;
     height:100px;
     background:#ccc;
 }

JAVASCRIPT

$(".toggle").click(function () {
    $(this).effect("shake", {
        direction: "left",
        times: 4,
        distance: 5
    }, 30);
});

Answer 2

I found another solution that may be useful to someone: Unwrap the added ui-effects-wrapper div, and reset the css...

if ( $('.toggle').parent().is( ".ui-effects-wrapper" ) ) {
     $('.toggle').unwrap();
}
$('.toggle').css('position', 'absolute'); // set any other css position values which may have been overwritten (top, left, etc.)

This was the only thing I could make work in my situation.