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

Question

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

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

我需要 marginTop 值是灵活的。请帮忙。谢谢！

Answer 1

代码可以写得更好..我会把这个留给你:)

$(document).ready(function() {
  $("#uparr").click(function() {
    $("div").animate({
      marginTop: (parseInt($("div").css("marginTop")) - parseInt($("#marginTop").val())) + 'px'
    }, "slow");
  });
  
  $("#downarr").click(function() {
    $("div").animate({
      marginTop: (parseInt($("div").css("marginTop")) + parseInt($("#marginTop").val())) + 'px'
    }, "slow");
  });
  
  $("#leftarr").click(function() {
    $("div").animate({
      marginLeft: (parseInt($("div").css("marginLeft")) - parseInt($("#marginTop").val())) + 'px'
    }, "slow");
  });
  
  $("#rightarr").click(function() {
    $("div").animate({
      marginLeft: (parseInt($("div").css("marginLeft")) + parseInt($("#marginTop").val())) + 'px'
    }, "slow");
  });
});

#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='100' onchange='$("#down").click'/>
<button id='uparr'>Move up</button>
<button id='downarr'>Move down</button>
<button id='leftarr'>Move left</button>
<button id='rightarr'>Move right</button>
<div id='down'></div>

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

How to move a square using jQuery? User inputs pixels

jquery

jquery-animate

user-input