1

私はJQueryアニメーションに取り組んでおり、コミュニティから助けを得られることを願っています.

目的

地球のアニメーションを作成しようとしています。球体は左から現れ始め、次に跳ね始めます。バウンドしながら、前方右方向へも移動する。ページの中央に到達すると停止します。その後、次のアニメーションが開始されます。次のアニメーションでは、地球が回転し始めます。

私は何を試しましたか？

両方のアニメーションを1 つのユニットとして正しく動作させていますが、それらを 1 つに結合するのに問題があります。跳ねる部分はこれで終わりですが、球体が跳ねている間は、回転効果を非表示にして、跳ね返り効果が終わった後に開始する必要があります。

それを行うために遅延のある関数を使用しようとしhide()ましたが、機能させることができません。助けてくれてとても感謝しています。 これが私が今まで実装したものです。

バウンスが終わるまで回転アニメーションを非表示にするのを手伝ってください。前もって感謝します。

4

1 に答える 1

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>
于 2012-05-19T16:34:32.390 に答える