如何使链接的jquery动画在彼此之间流动？

查看此网站：

请注意，太阳先升到顶部，然后再升到右侧。这是我的密码：

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});

这将是很好的，如果它可以在一个更拱模式，而不是两个直线动画。如果我在两个“关键帧”之间创建两个“关键帧”，在拱门所在的位置，就会出现起伏，因为Jquery简化了动画，而不仅仅是从一个移动到另一个

我的数学不够好，无法计算出我将如何做到这一点，但由于窗口的宽度是在执行之前计算出来的，我相信有人可能知道如何做到这一点

---

那么，我如何让它在拱门中而不是点对点进行动画制作呢？

看看jQuery的文档。您可以使用值

linear

作为调用的第三个参数，简单地指定要关闭的缓和

通过这种方式，可以设置任意多个关键帧