0

要素のインデックスを渡して、各リスト項目のコンテンツをスライドさせようとしていますが、遅延があります

ここに私のコードがあります

    for(var i = 1; i <= $("#colContainer li").length ; i++) {
        var el = $("#colContainer li:nth-child(" + i + ") .colContent");

        var delay = function() {
            slide(el);
        };
        setTimeout(delay, 10);
        function slide(el){
            el.slideUp();
        };
    };

しかし、最後の1つだけがスライドするたびに

私が期待しているのは、インデックス1から最後まで遅延してスライドアップすることです

私もこれを試しました

    index = $(this).parent("li").index();
    for(var i = 1; i <= $("#colContainer li").length ; i++) {
        (function(i) {
            var el = $("#colContainer li:nth-child(" + i + ") .colContent");

            var delay = function() {
            slide(el);
            };
            setTimeout(delay, 10);
            function slide(el){
            el.slideUp();
            };
        })(i);
    };

しかし、それらはすべて一度にスライドします。インデックス 1 のスライドが必要です。その後、インデックス 2 と ...

FORループを使用する方法はありますか??

4

4 に答える 4

7

これは、var elスコープがループ ブロックではなく関数ブロックに限定されているためです。

次のようなことを試してください：

for( var i=1; ......) { (function(i) {
    var el = ...
    // rest of your code, unchanged
})(i); }
于 2013-06-20T23:32:58.090 に答える
6

ループの反復ごとに el の値をスコープするクロージャーが必要です。

for(var i = 1; i <= $("#colContainer li").length ; i++) {
  var el = $("#colContainer li:nth-child(" + i + ") .colContent");
  (function(el) {
    setTimeout(function(){
        el.slideUp();
    },10);
  })(el);
}

ただし、これでもすべてが同時にアニメーション化されます。それが望ましい結果である場合は、jQuery を使用して 1 つのステップですべてを実行できます。一度に 1 つずつアニメーション化する場合は、次のようにします。

for(var i = 1; i <= $("#colContainer li").length ; i++) {
  (function(i) {
    var el = $("#colContainer li:nth-child(" + i + ") .colContent");
    setTimeout(function(){
        el.slideUp();
    }, i * 10);
  })(i);
}
于 2013-06-20T23:34:56.467 に答える
2

それらをキューに入れるか、すべてスライドアップする前に 10 ミリ秒の遅延が必要か?

forループは必要ですか？

次は後者を行いませんか？

setTimeout(function() {
   $("#colContainer li .colContent").slideUp();
}, 10);

キューに入れられたスライドの例:

(function slideContent(index) {
   $("#colContainer li:nth-child(" + index + ") .colContent").slideUp();
   if ($("#colContainer li:nth-child(" + (index + 1) + ") .colContent").length == 1) {
      setTimeout(function() { slideContent(index + 1); }, 250);
   }
})(1);
于 2013-06-20T23:43:15.247 に答える
0

それらをすべて同時にアニメーション化することが意図されていない限り、この方法でループに設定することはできません。そうすれば、それらはすべて（ほぼ）同時に実行され、あなたが言うように、実際には最後のものだけが表示されます。

前のものの完了から連続するものをそれぞれトリガーする必要があります。それらをコールバックと一緒にチェーンします。

delay次の setTimeout を設定する必要があります。そうすれば、あなたが求めている結果が得られます。

EDIT ここで他の回答を考えると、一時停止時間を10ミリ秒から100秒程度に増やしてから、他の人が提案した* iソリューションを使用することをお勧めします。10 ミリ秒に i を掛けても、顕著な遅延が発生するわけではありません。私は 100 ミリ秒から始めて、それがぎこちない場合は、そこから 10 ミリ秒ずつ下げて、満足できるアニメーションになるようにします。

于 2013-06-20T23:32:51.213 に答える