动画Div左右移动，但不上下移动

Question

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

例如，如果我按向左箭头键，则div向左移动等。

当前，当页面加载/刷新时，我的div能够左右移动。 但是，一旦我将div右移，我将无法向左移动，当我将其向下移时，我将无法将其向上移动，依此类推...

我如何使我的div在各个方向上都更加平滑？

jsfiddle： http : //jsfiddle.net/6U6cA/4/

我的密码

HTML：

<body>
    <div id="container">
      <div id="switcher">
        <div class="label">TestDiv</div>
        <button id="switcher-default">Default</button>
        <button id="switcher-large">Default 1</button>
        <button id="switcher-small">Default 2</button>
      </div>

    </div>
  </body>

CSS：

#switcher {
  width: 300px;
  padding: .5em;
  border: 1px solid #777;
}
.label {
  width: 130px;
  margin: .5em 0;
  cursor: pointer;
}

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;

  }
});

Answer 1

首先要设置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;

        }
    });

});

小提琴