Jquery seesaw effect

Question

I am trying to do a seasaw effect with Jquery, but need some help with which plugin to use. I want the bar to go up and down and the box on the top to move with it. here is my code on JsFiddler: http://jsfiddle.net/semantic/LscQd/4/

Thanks

Answer 1

Using the jQuery Rotate plugin, I was able to get the teeter-totter effect with an interval and a timeout:

setInterval(function(){
    $(".bar").rotate({animateTo:15});
    $(".box").animate({left:284},1000);
    setTimeout(function(){
        $(".bar").rotate({animateTo:-15});
        $(".box").animate({left:0},1000);        
    }, 1000);
}, 2500);​

Fiddle: http://jsfiddle.net/LscQd/10/

Answer 2

Quick attempt, not great I know but should be useful as a starting point. Uses css transforms to rotate seesaw between -30 and 30 degrees. Hope it helps

http://jsfiddle.net/czAHU/1/

edit: animating the bar instead looks much better than the whole wrapper. in all honesty though i didnt expect it to move the box too, so i might be a bit more cautious about it... http://jsfiddle.net/czAHU/2/