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

Question

我正在尝试将方向变量传递给jQuery animate函数，但动画无法正常工作。 HTML

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

JS

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

Fiddle

- user1184100

---

感谢Gallery Guy，由于我正在进行简单的动画制作，所以不想使用jQuery UI，因此不得不接受Archer的答案。 - user1184100

Answer 1

你需要创建一个对象来封装您所需的所有动画选项，并使用变量作为名称添加到它们中... http://jsfiddle.net/FyrXH/

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

- Reinstate Monica Cellio

Answer 2

你不能以这种方式将变量用作对象的属性，你可以使用方括号表示法来设置属性，然后将对象传递给函数：

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

http://jsfiddle.net/QmmSu/

- Ram

Answer 3

第二行中的 direction 是属性名本身，它不会被替换为相同名称的变量。

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

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

http://jsfiddle.net/FyrXH/

- CBroe

---

我猜使用变量 direction 的主要目的是能够动态更改动画方向，比如说，改为 right。而你的解决方案只是硬编码了 left 方向。 - keaukraine