合并两个JQuery动画

Question

我正在做一个JQuery动画，我希望我能得到社区的帮助。

目标

我正试图创造一个全球动画。地球开始从左边的出现，然后开始弹跳。在反弹的同时，它也朝着前进的方向向右移动。当它到达页面的中心时，它就停止了。之后，下一个动画就开始了。在下一个动画中，地球开始旋转。

我试过什么？

我有两个动画正常工作作为单一单位，但我有困难加入他们成为一个。我已经完成了弹跳部分，但是当地球在弹跳时，旋转的效果应该被隐藏起来，并且应该在弹跳效果结束后开始。

我尝试使用带有延迟的hide()函数来做到这一点，但是我无法使它工作。我会非常感谢你的帮助。到目前为止，我已经实现了这里。

请帮助我隐藏旋转动画，直到反弹结束。提前谢谢。

Answer 1

<script type="text/javascript">
 $zombie = $('img#flickr');
          function runit(){
            $("#main_content").hide();
            $zombie
             .animate({ opacity: 1 },"fast")

             .animate({top:'500px',left:'100px'}, {duration:500})
             .animate({top:'0px', left:'180px'}, {duration:600})
             .animate({top:'400px', left:'180px'}, {duration:700})
             .animate({top:'0px', left:'260px'}, {duration:800})
             .animate({top:'300px', left:'320px'}, {duration:900})
             .animate({top:'50px', left:'360px'}, {duration:1000})
             .animate({top:'200px', left:'420px'}, {duration:1100})
             .animate({top:'80px', left:'460px'}, {duration:1200})
             .animate({top:'150px', left:'480px'}, {duration:1200})          
             .animate({top:'104px', left:'495px'}, 1300,function(){
                   $("#main_content").show();
                });
          }
        runit()
</script>