动画div具有不同的宽度和点击速度

Question

我看过这个网站和一个非常好的动画功能！但我不是一个jQuery专业人员，并且很想知道这个注册bg是如何运作的，它以这种方式动画。

http://www.thecapitol.pn/capitolconcerns - ＆gt;点击中间的箭头

div怎么可能用不同的动画速度来动画不同的宽度？我在网上找不到任何可行的方式。

更新

$("#box1").click(function(e) {
    TweenMax.to(box, 0.5, {x: 500,y:0, rotation: 20});
    TweenMax.to(box, 0.5, {rotation: 10, delay: 0.3});
});

$("#box2").click(function(e) {
    TweenMax.to(box, 0.5, {x: 0,y:0, rotation: -5});
    TweenMax.to(box, 0.5, {rotation: 0, delay: 0.3});
});

jsFiddle

Answer 1

我认为这是使用canvas实现的。网站来源指向tweenmax。您可以在Why GSAP页面获取更多信息。您可以使用firebug等工具检查来源，并仔细查看abstractView和registration js文件。

更新

1. GreenSock为您提供此Cdn http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js
2. 很好的来源：Tips for using the GreenSock Animation Platform
3. 在你的div 500px和500px以及margin：0
之后尝试：TweenMax.to($('#box'), 1, {x: -290,y:-300, rotation: 50, delay: 1.5});