如何移動封閉內的DOM元素

Question

我試圖按照this answer遞增地移動DOM元素來使用封閉。最終我想動態地創建許多應該獨立移動的DOM元素，所以這就是爲什麼我要在函數內定義變量的原因。

從給出的答案的示例是

var lightning = new Array(); 
lightning.push($(".lightning")); 

var l0 = -210; 

function thunkAdd(){ 
    var lThis = l0; 
    console.log('set lThis to '+ lThis); 
    return function inc() { 
    console.log('lThis = '+ lThis); 
    return lThis ++; 
    } 
    lightning[0].css("left", lThis); 
    console.log('lightning[0] left = '+lightning[0].css("left")); 
} 

var incrementInterval = setInterval(thunkAdd(), 33); 

first example on codepen。查看控制檯，看起來由於某種原因，console.log('lightning[0] left = '+lightning[0].css("left"));未運行。

一種不同的方法我試過是：

var lightning = new Array(); 
lightning.push($(".lightning")); 

var l0 = -210; 
var lThis = l0; 

function thunkAdd(){ 
    lThis ++; 
    console.log('lThis = '+ lThis); 

    lightning[0].css("left", lThis); 
    console.log('lightning[0] left = '+lightning[0].css("left")); 
} 

var incrementInterval = setInterval(thunkAdd, 33); 

second example on codepen。這將在整個屏幕上移動圖像，但理想情況下（因爲下一步是動態創建並移動這些圖像中的許多圖像），我希望在thunkAdd函數第一次運行時定義變量lThis，然後如果已定義，增加它並使用lThis變量移動圖像。我怎樣才能做到這一點？

Answer 1

正如已經在註釋代碼中提到的，return不會被執行，所以你永遠不會改變元素的css left屬性，而只是增加變量。

您需要移動正在執行間隔的閉合內部的lightning[0].css("left", lThis);。

見updated example

您也可以考慮使用jQuery的animate，而不是這個（你也可以做到這一點與許多元素或環路）

$(".lightning").animate({left: '2000px'}, 10000, 'linear');