将方向作为变量传递给jquery动画函数

Question

我正在尝试将方向变量传递给jquery动画，但动画不起作用。

HTML

<div class="box">Box</div>

JS

var direction = 'left';
$('.box').animate({direction : '100'},500);

Fiddle

Answer 1

你需要创建一个传入的对象，它封装了你需要的所有动画选项，你可以使用变量作为名称来添加它们......

http://jsfiddle.net/FyrXH/

var direction = 'left';
var options = {};
options[direction] = 100;
$('.box').animate(options, 500);

Answer 2

您不能将变量用作对象的属性，您可以使用bracket notation来设置属性，然后将对象传递给函数：

var o = {};
o[direction] = 100;
$('.box').animate(o, 500);

http://jsfiddle.net/QmmSu/

Answer 3

第二行中的

direction是属性名称本身，它不会替换同名变量。

您可以做的是将整个对象作为变量传递：

var direction = {left : '100'};
$('.box').animate(direction,500);

http://jsfiddle.net/FyrXH/