jQuery UI Shake Effect禁用「position：absolute」（Chrome，Opera，IE）

我想將jQuery UI搖動效果與CSS樣式position: absolute結合使用，但這隻適用於Firefox。在所有其他瀏覽器中，效果會中斷CSS樣式。jQuery UI Shake Effect禁用「position：absolute」（Chrome，Opera，IE）

我希望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); 
});

來源

2013-10-28 kindisch

不要只在代碼塊中添加一個輕浮評論。包含代碼的規則是有原因的。如果jsfiddle宕機，你的問題是沒用的。 –

這很有道理，我很抱歉。 – kindisch

奧基，我得到了它。我在<div class="toggle"></div>周圍添加一個支架，並將它們設置爲垂直和水平中心。因此，我可以在我的<div class="toggle"></div>上刪除「position：absolute」，並且ui效果停止中斷。

BTW：搖影響不會禁用「的位置是：絕對的」，但它創造了驚天元素，這就是所謂<div class="ui-effects-wrapper" style="...">...</div>

下面是最後的代碼，這對每一個圍繞着一個新的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-29 11:07:27 kindisch

我發現ANOT她的解決方案，可能是有用的人：解開的UI添加的效果，包裝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-21 17:41:50 hipnosis

jQuery UI Shake Effect禁用「position：absolute」（Chrome，Opera，IE）

回答

相關問題