passing object to for loop
<p>I have a for loop that runs through a selection of li's via a data attribute.</p>

<p>I want each group of Lis to have a staggered fade in.  This works fine until I put the animation inside a <code>setTimeout</code> . Instead of looping through each li, it sticks on the number 5.  </p>

<p>JS:</p>

<pre><code>for (i=0;i&lt;6;i++) {
console.log(thisI);
var thisLi = $("li[data-order='"+i+"']");

setTimeout(function() {
TweenMax.to(thisLi,0.4, {css:{opacity:1}});
},200*i);

}
</code></pre>

<p>HTMl </p>

<pre><code> &lt;li data-order="1"&gt;sometext&lt;/li&gt;
 &lt;li data-order="1"&gt;sometext&lt;/li&gt;
 &lt;li data-order="2"&gt;sometext&lt;/li&gt;
 &lt;li data-order="3"&gt;sometext&lt;/li&gt;
 &lt;li data-order="2"&gt;sometext&lt;/li&gt;
 &lt;li data-order="3"&gt;sometext&lt;/li&gt;
</code></pre>

<p>CSS </p>

<pre><code>li {
    opacity:0;
}
</code></pre>

<p>Here's chromes log when I <code>console.log(thisLi);</code> inside the <code>setTimeout</code> :</p>

<p><code>&lt;li data-order=​"5" style=​"opacity:​ 0.11640000000000006;​ "&gt;​…​&lt;/li&gt;​
, 
&lt;li data-order=​"5" style=​"opacity:​ 0.11640000000000006;​ "&gt;​…​&lt;/li&gt;​
]</code></p>
