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位置：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>

Answer 2

用单引号或使用inbuild关键字marginTop

包装css属性'margin-top'

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

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

2 个答案: