如何使用jQuery移动正方形？用户输入像素

Question

我写了一个用于在jQuery中移动正方形的代码（例如50px）。现在，我需要用户输入像素（在文本字段中），该像素将定义正方形将向上，向下，向左或向右移动多少。这是我写的一些代码：

$(document).ready(function(){
 $("#down").click(function(){
    $("div").animate({
        marginTop:"100px"
    }, "slow");
});

我需要marginTop值才能灵活。请帮忙。谢谢！

Answer 1

$(document).ready(function() {
  $("#marginTop").change(function() {
    $("div").animate({
      marginTop: $("#marginTop").val()
    }, "slow");
  });
  $("#marginTop").change();
});

#down {
  background-color: red;
  width: 50px;
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='marginTop' value='100px' onchange='$("#down").click'/>
<div id='down'></div>