1

我想将 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);
});
4

2 回答 2

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);
});
于 2013-10-29T11:07:27.560 回答
0

我找到了另一个可能对某人有用的解决方案：打开添加的 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.)

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

于 2013-11-21T17:41:50.180 回答