JRumble和css中的固定/绝对位置不能一起工作

Question

我用 position: absolute 设计了我的网站徽标，但是当我使用 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;

}

怎么了？

Answer 1

不幸的是，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 可以保持不变。我调整了演示的宽度和位置值，以表明它工作得更好。根据您的需要进行调整。