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

时间:2014-10-08 20:37:43

标签: javascript jquery jquery-animate

我正在使用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);

希望通过我的代码找到问题的帮助。感谢

2 个答案:

答案 0 :(得分:1)

您需要对传递给动画的对象文字中的动态键使用括号表示法。另外,我正在玩你的想法,如果你正在调整top / left css属性(或margin-top / left),看起来你仍然需要做一些分支逻辑来处理正确/向下。

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);
};

答案 1 :(得分:0)

您不能在对象中使用字符串作为键。您可以通过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/

希望这会有所帮助:)