合并两个JQuery动画

Question

我正在制作JQuery动画，我希望我能从社区获得帮助。

目的

我正在尝试制作地球动画。地球开始从左侧出现，然后开始反弹。在弹跳时，它也会向向前方向移动到向右。当它到达页面的中心时，它会停止。 之后，下一个动画开始。在下一个动画中，地球仪开始旋转。

我尝试了什么？

我让两个动画都正常工作为单个单元，但我无法将它们合并为一个。 我完成了弹跳部分但是当地球弹跳时，旋转效果应该被隐藏，并且应该在反弹效果结束后开始。

我尝试使用hide()函数延迟执行此操作，但我无法使其正常工作。我非常感谢你的帮助。 Here是我迄今为止实施的内容。

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

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>