javascript - jQuery 动画问题 - 动态选择方向

Question

我正在使用 jQuery 在黑色背景上移动字母。这样做没有任何目的，纯粹是玩玩而已。我有四个按钮，左、右、上、下，分别用来移动字母。但由于某种原因，我在使用 .animate() 方法时遇到了问题。我知道我可以使用 switch 语句，但我想要一个更简洁的解决方案。

这是 html:

<div class="box">
    <p>O</p>
</div>

<div class="slider-nav">
    <button data-dir="left">Left</button>
    <button data-dir="right">Right</button>
    <button data-dir="top">Up</button>
    <button data-dir="bottom">Down</button>
</div>

这是 JavaScript:

(function($) {

var object = $('p');

$('button').on('click', function() {
    var direction = $(this).data('dir');
    move(direction);
});

function move(dir) {
    var dir = 'margin' + '-' + dir;
    object.animate({dir: '+=25px'}, 500);
};

})(jQuery);

非常感谢您帮助查找我的代码的问题。谢谢

Answer 1

您需要对传递给 animate 的对象文字中的动态键使用括号表示法。另外，我正在研究你的想法，如果你正在调整顶部/左侧CSS属性(或边距顶部/左侧)，看起来你仍然需要做一些分支逻辑来处理右/下。

JSFIDDLE:http://jsfiddle.net/biz79/D2RLR/7010/

var $o = $('p');
var options = {
    "left":0,
    "top":0
};

//...

function move(dir,oper) {
    if (oper === 'add') {
      options[dir] += 25;
    }
    else {
      options[dir] -= 25;
    }

  $o.animate(options,500);
};