JRumble and position fixed/absolute in css don't work together

Question

I designed my site logo with position: absolute but when i used Jrumble to shake it, it's shaking but css position disabled.

Here is my js codes:

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

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

demoStart();

and css codes:

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

}

whats wrong?

Answer 1

Unfortunately, jRumble depends on the element being positioned with relative. It will force it to that state when run. You can work around it by putting all of your absolute position rules on a wrapper element, then applying the jRumble effect directly tothe child element of that absolutely positioned element.

View the demo here: 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;
}

Your JavaScript can stay the same. I adjusted the width and position values for the demo to show that it is working better. Adjust those for your needs.