0

データ属性を介して選択したliを実行するforループがあります。

Lisの各グループに千鳥状のフェードインを持たせたいです。これは、アニメーションをの中に入れるまでは問題なく機能しsetTimeoutます。各liをループする代わりに、番号5に固執します。

JS：

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

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

}

HTMl

 <li data-order="1">sometext</li>
 <li data-order="1">sometext</li>
 <li data-order="2">sometext</li>
 <li data-order="3">sometext</li>
 <li data-order="2">sometext</li>
 <li data-order="3">sometext</li>

CSS

li {
    opacity:0;
}

console.log(thisLi);これが私が中にいるときのクロムログですsetTimeout：

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

4

2 に答える 2

5

コールバックが実行されるまでsetTimeoutに、ループはすでに終了しているため、i最大値に達しています。クロージャを使用して、i各反復での値をキャプチャできます。

for (i = 0; i < 6; i++) {
    (function (i) {
        var thisLi = $("li[data-order='" + i + "']");
        setTimeout(function () {
            TweenMax.to(thisLi, 0.4, { css: { opacity:1 } });
        }, 200 * i);
    }(i));
}

補足：i他の場所で宣言していない場合は、グローバルスコープにリークしています。

于 2012-07-05T12:37:30.387 に答える
1

変数thisLiのスコープに問題があると思います。次のようなクロージャを作成してみてください。

var thisLi = $("li[data-order='"+i+"']");
var f = function() {TweenMax.to(thisLi,0.4, {css:{opacity:1}});};

setTimeout(f,i*200);
于 2012-07-05T12:40:12.237 に答える