jQuery UI Shake Effect 禁用“position:absolute”（Chrome、Opera、IE）答案

【问题标题】：jQuery UI Shake Effect disables "position:absolute" (Chrome, Opera, IE)jQuery UI Shake Effect 禁用“position:absolute”（Chrome、Opera、IE）
【发布时间】：2013-11-22 01:47:01
【问题描述】：

我想将 jQuery UI 抖动效果与 CSS 样式 position: absolute 结合使用，但这仅适用于 Firefox。在所有其他浏览器中，该效果会中断 CSS 样式。

我希望div 水平和垂直对齐，并且在不禁用position: absolute 的情况下，震动效果可以正常工作。但我无法让它工作。

这是我的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);
});

【问题讨论】：

不要只是在代码块中添加轻率的注释。包含代码的规则是有原因的。如果 jsfiddle 出了问题，你的问题就没用了。
有道理，对不起。

标签： jquery user-interface position effect shake

【解决方案1】：

好的，我明白了。我在<div class="toggle"></div> 周围添加了一个支架，并将它们设置为垂直和水平中心。因此，我可以删除<div class="toggle"></div> 上的“位置：绝对”，并且 ui 效果停止中断。

顺便说一句：Shake-Effect 不会禁用“position:absolute”，但它会在摇晃元素周围创建一个新的 div，称为<div class="ui-effects-wrapper" style="...">...</div>

这是适用于所有浏览器的最终代码。 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);
});

【讨论】：

【解决方案2】：

我找到了另一个可能对某人有用的解决方案：打开添加的 ui-effects-wrapper div，然后重置 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.)

这是我在我的情况下唯一可以做的事情。

【讨论】：