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

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

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

---

我需要

marginTop

值具有灵活性。请帮忙。谢谢大家!

代码可以用更好的方式编写。。我将把这个留给你：）

$（文档）.ready（函数（）{
$（“#uparr”）。单击（函数（）{
$（“div”）.animate({
marginTop：（parseInt（$（（“div”）.css（“marginTop”）-parseInt（$（“#marginTop”）.val（））+'px'
}“慢”）；
});
$（“#downarr”）。单击（函数（）{
$（“div”）.animate({
marginTop：（parseInt（$（（“div”）.css（“marginTop”）+parseInt（$（“#marginTop”）.val（））+px'
}“慢”）；
});
$（“#leftarr”）。单击（函数（）{
$（“div”）.animate({
marginLeft:（parseInt（$（“div”）.css（“marginLeft”）-parseInt（$（“#marginTop”）.val（））+'px'
}“慢”）；
});
$（“#rightarr”）。单击（函数（）{
$（“div”）.animate({
marginLeft：（parseInt（$（（“div”）.css（“marginLeft”）+parseInt（$（“#marginTop”）.val（））+px'
}“慢”）；
});
});
#向下{
背景色：红色；
宽度：50px；
高度：50px；
}

上移
下移
向左移动
右移