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

【问题标题】：how to make chained jquery animations flow between each other?如何使链接的jquery动画在彼此之间流动？
【发布时间】：2010-08-18 19:41:17
【问题描述】：

看看这个网站：

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 简化了动画，而不仅仅是从一个到另一个。

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

那么我如何让它以拱形而不是点对点动画？

【问题讨论】：

标签： jquery background-position

【解决方案1】：

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

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

【讨论】：