how to make chained jquery animations flow between each other?

Question

Hello,

Check out this site:

http://photoshop.tutorialcraft.com/

Notice the sun go to the top and then to the right. Here is my code:

var windowWidth = $(window).width();

var width50 = (windowWidth*0.50)-220; //220 is half the width of the BG image being animated.
var width100 = (windowWidth*1);


$("#sunnmooncycle").css("backgroundPosition", "-440px 100px");.delay(2000) 

            .animate({'backgroundPosition':'('+ width50+'px '+'-400px' + ')'}, {duration:1500})
            .animate({'backgroundPosition':'('+ width100+'px '+'100px' + ')'}, {duration:1500});

It would be nice if it could go in a more arching pattern, rather then two straight animations. If I create 2 "keyframes" in between, in the position where an arch would be, appears choppy, since Jquery eases animations, instead of just flowing from one to another.

I'm not good enough with math to figure out how I would do this, but since the width of the window is calculated just before execution, I'm sure someone may know how to do this.

So how do I get this to animate in an arch instead of point-to-point ?

Answer 1

Take a look at the docs for jQuery's animate. You can simply specify the easing to be off by using the value linear as the third argument to the call.

You can set up as many keyframes as you want this way.