Javascript 将形状移动到4个方向

我正在学习jQuery技能，希望创建一个简单的形状，下面有4个按钮，可以控制它并在用户单击后向上、向下、向左或向右移动。最简单的方法是什么

问题是形状朝着一个非常奇怪的方向移动。 这是我写的：

JS:

---

这是我在5分钟内完成的非常基本的东西，但也许它会给你一个起点

$（'a'）。在（'click'）上，函数（e）{
var$shape=$（“#shape”），
dir=$（this.data（'dir'）；
如果（dir=='left'）{
$shape.animate（{left:'-=10px'}，100）；
}else if（dir=='right'）{
$shape.animate（{left:'+=10px'}，100）；
}否则如果（dir=='up'）{
$shape.animate（{top:'-=10px'}，100）；
}else if（dir=='down'）{
$shape.animate（{top:'+=10px'}，100）；
}
e、 预防默认值（）；
});
#形状{
边界半径：50%；
宽度：50px；
高度：50px；
背景色：红色；
位置：相对位置；
}

| 
| 
|
welcome@SuppoGirl:-）你能分享一些代码吗？你试过什么？是否尝试使图元从原点移动一定距离？或者您可以单击两次
up
按钮，元素的数量将增加两倍？我建议使用CSS转换，而不是jQuery的animate（），非常感谢您给出的惊人答案。这是一个伟大的起点。请您澄清一下为什么使用e.preventDefault（）；？真的有必要吗？
e.preventDefault（）
防止锚（
）标记的默认操作触发。在这种情况下，默认操作只是在URL的末尾添加一个hashtag，因此如果您想丢失这一行，这并不是什么大问题。
$("#rightButton").click(function(){
        $("#shape").animate({
        right: "+=50px"
        });
    });
  $("#leftButton").click(function(){
        $("#shape").animate({
        left: "-=50px"
        });
    });
  $("#upButton").click(function(){
        $("#shape").animate({
        top: "+=50px"
        });
    });
  $("#downButton").click(function(){
        $("#shape").animate({
        bottom: "-=50px"
        });
    });