JRumble和在CSS中的位置固定/絕對不一起工作

我設計了我的網站標誌的位置：絕對，但是當我用Jrumble來搖晃它時，它抖動但禁用了CSS位置。JRumble和在CSS中的位置固定/絕對不一起工作

這裏是我的js代碼：

$('#log').jrumble(); 
var demoStart = function(){ 
    $('#log').trigger('startRumble'); 
    setTimeout(demoStop, 500); 
}; 

var demoStop = function(){ 
    $('#log').trigger('stopRumble'); 
    setTimeout(demoStart, 10000); 
}; 

demoStart();

和CSS代碼：

#log { 
position: absolute; 
width: 650px; 
right: 25px; 
top: -15px;

}

什麼錯？

來源

2014-04-15 kaygisiz - lymphatic

不幸的是，jRumble取決於與relative定位的元素。運行時它會強制該狀態。您可以通過將所有絕對位置規則放在包裝元素上，然後將jRumble效果直接應用於該絕對定位元素的子元素來解決此問題。

觀看演示在這裏：http://jsfiddle.net/Kw6eb/

HTML

<div id="log-wrap"> 
    <img src="http://placekitten.com/300/300" id="log"> 
</div>

CSS

#log-wrap { 
    position: absolute; 
    width: 250px; 
    right: 100px; 
    top: 100px; 
} 

#log { 
    width: 250px; 
}

你的JavaScript可以保持不變。我調整了演示的寬度和位置值，以顯示它工作得更好。根據您的需求調整這些。

來源

2014-04-16 03:21:15 jackrugile

你說我必須把我的元素 - 誰jrumbled-內另一個div。我已經做了它，但它的額外工作，我不想那樣做。有沒有真正的解決方案，還是我必須這樣做？ –

這是我能想到的唯一解決方案。我最近寫了一個更強大的版本2，但是在這裏寫了一個更好的基於CSS的動作：http://elrumordelaluz.github.io/csshake/我會試試看。 – jackrugile

非常感謝！ –

JRumble和在CSS中的位置固定/絕對不一起工作

回答

相關問題