문제

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?

도움이 되었습니까?

해결책

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.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top