將屬性設置爲變量後，動畫未執行

Question

雖然我試圖製作滑塊，但需要對此進行有條件地應用marginLeft或marginTop，所以我試圖從返回的變量值中取出它。

但是，我陷入了一個問題，經過大量的努力發現問題出在哪裏===>我無法對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' 

該屬性被命名爲「移動」，而不是「marginLeft」。

達到你想要的東西，這樣做：

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

喏，這就是你的working demo。