javascript - 使用动画单击按钮时需要移动到顶部

Question

嗨，我想在单击具有动画效果的按钮时移动我的 div，所以我使用 .animate 。但它不能正常工作这是我正在使用的代码

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#box").animate({margin-Top: "300px"});
    });
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">Animate topdown</button>


<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>

我的代码有什么问题我不能使用 top 而不是 margin-top 因为我的 div position:relative;

Answer 1

您需要使用 marginTop 或将属性用引号引起来。

$(document).ready(function() {
  $("#btn1").click(function() {
    $("#box").animate({
      marginTop: "300px"
      // or 
      // "margin-top" : "300px"
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">Animate topdown</button>


<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>