jquery - 如何使链接的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您可以简单地使用该值作为调用的第三个参数来指定要关闭的缓动。

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