DOMエレメントをクロージャ内で移動するには

Question

DOMエレメントを徐々に移動するには、this answerのようにクロージャを使用しようとしています。最終的には、独立して動かすべきこれらの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

コメントで既に述べたように、リターン後のコードは実行されないので、要素のcss leftプロパティを変更することはありませんが、変数を増分します。

lightning[0].css("left", lThis);は、間隔で実行されているクロージャの内側に移動する必要があります。

あなたはまた、{）（あなたはまた、多くの要素またはループ内でこれを行うことができます）（リターン機能INC `後

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