javascript - 需要为对象设置动画并使其返回

Question

我需要我的飞机飞上跑道（这是地图）然后点击回来。到目前为止，它只会上涨。任何与 java script/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

尝试：

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

Answer 3

如果您需要飞机在第二次单击时返回，请使用以下命令：

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