javascript - オブジェクトを上にアニメーション化して元に戻す必要がある

Question

飛行機が滑走路 (マップ) を飛行し、クリックで戻ってくる必要があります。ここまでは上がるだけです。java スクリプト/html/jquery 関連のすべて。簡単な提案をしてください。ty ^^これが私の現在のコードです::

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

Answer 1

jsBin デモ

両方の飛行機にクラスを与え、次の.planeコードを使用します。

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

アニメーション コールバック内で、初期位置をやり直します。

Answer 2

2 回目のクリックで飛行機を戻す必要がある場合は、次のコマンドを使用します。

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

Answer 3

試す：

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