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

Question

查看此网站：

http://photoshop.tutorialcraft.com/

注意太阳到达顶部并然后向右。这是我的代码：

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

如果它可以采用更多的拱形模式，而不是两个直接的动画，那就太好了。如果我在其间创建 2 个“关键帧”，在拱形所在的位置，就会出现断断续续的情况，因为 Jquery 简化了动画，而不是仅仅从一个动画流到另一个动画。

我的数学能力不够好，无法弄清楚如何做到这一点，但由于窗口的宽度是在执行之前计算的，我确信有人可能知道如何做到这一点。

那么我如何让它以拱形而不是点对点的方式制作动画呢？

Answer 1

查看 jQuery 的 animate 的文档。您可以通过使用值 Linear 作为调用的第三个参数来指定关闭缓动。

您可以通过这种方式设置任意数量的关键帧。