CODEWITHSUNDEEP
javascriptjqueryhtml
needhelp
needhelp

Reputation: 35

Need to animate an object to top and make it go back

I need my plane to fly up the runway (which is the map) and come back on click. So far it only goes up. Anything java script/html/ jquery related. simple suggestions please. ty ^^ Here's my current code:: 

<div class="Map"><div id="MovingPlane1"></div></div>

JS : 

<script type="text/javascript">
    $(document).ready(function(){
        $("#MovingPlane1").click(function(){
            $("#MovingPlane1").animate({bottom:"250px"},"slow");
        });
    });
<script>

Upvotes: 3

Views: 184

Answers (3)

chucktator
chucktator

Reputation: 1856

If you need the plane to come back on the second click use the following:

var plane1up = false;
$(document).ready(function(){
    $("#MovingPlane1").click(function(){
        $("#MovingPlane1").animate({bottom:(plane1up==true ? "0px" : "250px")},"slow");
    });
});

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

jsBin demo

Give both your planes a class .plane and use this code:

$(".plane").click(function(){
      
   $(this).animate({bottom:250},800,function(){
       $(this).animate({bottom:0},800);
   });
  
});

Inside the animation callback you redo the initial position.

Upvotes: 1

mgraph
mgraph

Reputation: 15338

try:

$(this).animate({bottom:"250px"},"slow",function(){
   $(this).animate({bottom:"0px"},"slow");
});

Upvotes: 0

Related Questions