Hovering/wiggle effect

[EcazS]

Does anyone know how to create sort of a hovering/floating/wiggle effect with Javascript?
And not the "vibrating" effect that iPhones give out when you press an icon. Think of a hover car that floats up and down. Something like that but also to the sides.

I could animate it with jQuery but then it goes down then to the side and then up again creating a very ugly non-smooth effect.

Like this http://jsfiddle.net/cx2Sg/2/ but more wavy and smooth.

[jacek]

You could try creating a transform function that does the speed profile you want and then just setting the margin property on a timer. Something like

[syntax=css]#floaty {
transition: margin-top 1s bezier(0.42,0,0.58,1);
margin-top: 0px;
}[/syntax]

Then

[syntax=javascript]window.setInterval(function(){
var div = document.getElementById('floaty');
div.style.marginTop = (div.style.marginTop == '0px') ? '40px' : '0px';
}, 1000);[/syntax]

which would (in theory) make it move up and down once every two seconds, you would need to mess with the times in the bezier() to get it to look right.

Just the first thing I thought of

[EcazS]

That creates this, http://jsfiddle.net/XWkU7/

I will look into CSS3 animating but do you possibly have any ideas how to do this without using CSS3?

[jacek]

Hmm, this is a bit more like I was thinking http://jsfiddle.net/XWkU7/9/

I will look into CSS3 animating but do you possibly have any ideas how to do this without using CSS3?

Write some JavaScript to calculate the position and set it on an interval, it's going to be slow as heck compared to the CSS version.

[EcazS]

I'm not that good with Javascript.

But something like that with the CSS could work... I'm not much into CSS3 but how would I make it "animate"/transition into a small circle, very subtle. Not necessarily a 100% round circle but just so it goes up and to the side and then down and to the other side, sort of...

[jacek]

you can combine left and top http://jsfiddle.net/XWkU7/13/ but getting a smooth (even ish) circle will be hard !