Question

我设计了我的网站标识位置：绝对但是当我使用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可以保持不变。我调整了演示的宽度和位置值，以表明它工作得更好。根据您的需要调整它们。

在CSS中JRumble和position fixed / absolute不能同时工作

1 个答案: