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

您需要对传递给动画的对象文字中的动态关键帧使用括号表示法。此外，我还在考虑你的想法，如果你正在调整上/左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);
};

Answer 2

不能在对象中使用字符串作为键。你可以通过eval函数来完成，但我不推荐。我会这样做：

function move(dir) {
    var distance = 25,
        dir = 'margin' + '-' + dir,
        animation = {},
        previousValue = parseInt($element.css(dir), 10);
    animation[dir] = previousValue + 25;
    $element.animate(animation, 500);
};

下面是一个工作示例：http://jsfiddle.net/6o28x8bt/

此外，这将仅为边距设置动画，如果您希望在单击按钮时将元素设置为方向，则需要对左右位置或边距进行递增/递减操作。例如：http://jsfiddle.net/jwL1e558/1/

希望这将有所帮助：）