在将属性设置为变量后，动画未执行

Question

当我尝试制作滑块时，我需要在此条件下应用marginLeft或marginTop，因此我尝试从返回的变量值中取出它。

但是，我陷入了一个问题，经过大量的努力才发现问题究竟是什么===＆gt;我不能为jQuery方法取变量值。我首先认为var something = 'margin-left';无效，因为{margin-left : ...}在没有引号的情况下无效，因此请使用marginLeft进行尝试，如下例所示：

这有效：

$(selector).click(function(){
    $(element).animate({
        marginLeft: '-=600'

这也有效：

$(selector).click(function(){
var toLeft = '-=600';
    $(element).animate({
        marginLeft: toLeft

但为什么不呢？ ：

$(selector).click(function(){
var move = 'marginLeft';
    $(element).animate({
        move: '-=600'

see this not working demo

咦！不允许在{property : value}方法中为jQuery方法分配属性变量？

我怎样才能让它发挥作用？或者，这是一个错误吗？

Answer 1

使用此语法创建对象时，

{
    property: value
}

属性名称不能是变量。您在这里使用的名称将是该属性的名称。在你的情况下：

var move = 'marginLeft';
    $(element).animate({
        move: '-=600'

该属性名为“move”，而不是“marginLeft”。

要实现您的目标，请执行以下操作：

var move = 'marginLeft';
var options = {};
options[move] = '-=20';
$(element).animate(options);

现在这是你的working demo。