CODEWITHSUNDEEP
jqueryjquery-ui
user379888
user379888

Reputation:

Merging two JQuery animations

I am working on a JQuery animation and I hope I can get help from the community.

Objective

I am trying to create an animation of the globe. The globe starts to appear from the left and then starts to bounce. While bouncing, it also moves in forward direction towards to right. When it reaches the centre of the page, it stops. After that the next animation starts. In the next animation, the globe starts to rotate.

What have I tried?

I have both of the animations working properly as single units but I am having trouble joining them into one. I am done with the bouncing part but while the globe is bouncing, the rotating effect should be hidden and should start after the bounce effect is over.

I tried using hide() function with delay to do that but I am unable to make it work. I would be very thankful for the help. Here is what I have implemented until now.

Please help me to hide the rotating animation until the bounce is over. Thanks in advance.

Upvotes: 1

Views: 234

Answers (1)

Registered User
Registered User

Reputation: 3699

<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>

Upvotes: 1

Related Questions