Question

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

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

目前我的div能够在页面加载/刷新时向左，向右，向上和向下移动。但是，一旦我向右移动我的div，我就无法向左移动它，当我向下移动它时，我无法移动它等等......

如何让我的div更加顺畅？

我的代码

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;

        }
    });

});

FIDDLE

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

1 个答案: