How can I create a "non-linear" trajectory using jQuery.animate()?

I'm trying to animate an element from positi开发者_运维技巧on A to position B, but I don't want it to go linearly between each point, I'd like to have kind of a "parabolic" trajectory.

Can I use jQuery.animate() at all?

Or should I be manually coding it from scratch using setInterval()?

Thanks!

Daniel

You can create your own "easing" functions on jQuery.easing, for instance, this function would approximate a sin curve over 90degrees

jQuery.easing.sin90 = function(p, n, firstNum, diff) {
    return Math.sin(p * Math.PI / 2) * diff + firstNum;
};

p is a number from 0-1 representing the percentage of the animation time, n is the actual time elapsed for this animation, and firstNum and diff are a little misleading, it appears as if at some point this would take a start / end value, but now all easing functions just normalize the p value so firstNum = 0 and diff = 1

I put together a simple fiddle showing using per property easing and some sin/cos functions to animate a div in circles using jQuery.

Here is a project

http://plugins.jquery.com/project/MoveTo-Bezier-Curve