Javascript 动画Div可以左右移动，但不能上下移动

我有一个div，我正在尝试使用jQuery制作动画。我的目标是根据相应的按键向左、向上、向右和向下移动div

例如，如果我按下左箭头键，div将向左移动等

当前，当页面加载/刷新时，我的div可以向左、向右、上下移动。然而，一旦我向右移动我的div，我就无法向左移动它，当我向下移动它时，我就无法向上移动它，等等

我怎样才能使我的div在各个方向上更加顺畅

jsfiddle：

我的代码

HTML:

jQuery：

$(document).ready(function() {

$('#switcher').css({
  position:'relative',
  display:'inline-block'
});
$(document).keyup(function(event){
  var key=event.which;

  switch(key){
    case 37:
      $('#switcher').animate({right:'+=20'});
      break;
    case 38:
      $('#switcher').animate({bottom:'+=20'});
      break;
    case 39:
      $('#switcher').animate({left:'+=20'});
      break;
    case 40:
      $('#switcher').animate({top:'+=20'});
      break;

  }
});

---

您首先设置

left

样式属性，然后设置

right

，但这不起作用，因为

left

未被删除，因此它将覆盖

right

样式

坚持使用一个CSS属性

$(document).ready(function () {

    $('#switcher').css({
        position: 'relative',
        display: 'inline-block'
    });
    $(document).keyup(function (event) {
        var key = event.which;

        switch (key) {
            case 37:
                $('#switcher').animate({
                    left: '-=20'
                });
                break;
            case 38:
                $('#switcher').animate({
                    top: '-=20'
                });
                break;
            case 39:
                $('#switcher').animate({
                    left: '+=20'
                });
                break;
            case 40:
                $('#switcher').animate({
                    top: '+=20'
                });
                break;

        }
    });

});

---

谢谢您的快速回复，不过只是一个问题。在我的控制台中，我看到当使用我的代码示例时，div将以类似left:20px、right:40px、top:40px、bottom60px的形式结束。在这种情况下，为什么左侧和右侧、顶部和底部不能相互抵消，留下相等的right:20px，bottom:20px，而不是left属性覆盖右侧？因为不能同时设置right和left（当宽度设置时），一个必须赢，在这种情况下它是left。

$(document).ready(function() {

$('#switcher').css({
  position:'relative',
  display:'inline-block'
});
$(document).keyup(function(event){
  var key=event.which;

  switch(key){
    case 37:
      $('#switcher').animate({right:'+=20'});
      break;
    case 38:
      $('#switcher').animate({bottom:'+=20'});
      break;
    case 39:
      $('#switcher').animate({left:'+=20'});
      break;
    case 40:
      $('#switcher').animate({top:'+=20'});
      break;

  }
});

$(document).ready(function () {

    $('#switcher').css({
        position: 'relative',
        display: 'inline-block'
    });
    $(document).keyup(function (event) {
        var key = event.which;

        switch (key) {
            case 37:
                $('#switcher').animate({
                    left: '-=20'
                });
                break;
            case 38:
                $('#switcher').animate({
                    top: '-=20'
                });
                break;
            case 39:
                $('#switcher').animate({
                    left: '+=20'
                });
                break;
            case 40:
                $('#switcher').animate({
                    top: '+=20'
                });
                break;

        }
    });

});