2

初心者はこちら。私はいくつかのリストアイテムを持っています。各リストアイテムに「.go」のクラスを一度に1つずつ追加し、事前に決められた時間のブロックで区切る必要があります。（時間の各ブロックは異なる期間になります）。

例えば：

  1. スクリプトは最初の（li）に「.go」クラスを追加します
  2. '.go'クラスはその（li）を正確に4.5秒間保持します。
  3. 4.5秒が経過すると、スクリプトは現在のリストアイテムから「.go」クラスを削除します
  4. スクリプトは次の（li）に移動し、「。go」クラスを追加します
  5. '.go'クラスはこの（li）を1.5秒間保持します。
  6. 1.5秒が経過すると、スクリプトは現在のリストアイテムから「.go」クラスを削除します
  7. そして、すべてのリストアイテムを循環するまで、このサイクルが繰り返されます

私が取り組んでいるスクリプトが機能しません。すべてのクラスを（li）に即座に追加します。そして、それらは異なる間隔でフェードアウトします。むしろ、異なる間隔でクラスを追加する必要があります。次に例を示します：http：//jsfiddle.net/bM6uY/8/

                         <ul>
                            <li>hello</li>
                            <li>World!</li>
                            <li>Foo</li>
                            <li>Bar</li>
                         </ul>

         $(function() {
           $('ul li:nth-child(1)').addClass("go")
                   .delay(4500)
                   .queue(function() {
                       $(this).removeClass("go");
                       $(this).dequeue();
                   });


            $('ul li:nth-child(2)').addClass("go")
                   .delay(1500)
                   .queue(function() {
                       $(this).removeClass("go");
                       $(this).dequeue();
                   });    


             $('ul li:nth-child(3)').addClass("go")
                   .delay(500)
                   .queue(function() {
                       $(this).removeClass("go");
                       $(this).dequeue();
                   });      


             $('ul li:nth-child(4)').addClass("go")
                   .delay(5000)
                   .queue(function() {
                       $(this).removeClass("go");
                       $(this).dequeue();
                   });                              
            });
4

2 に答える 2

1

このようなものはどうですか：

$(function() {
    var index = 0;
    var length = $("ul").children().length;
    var delays = [
            500,
            1500,
            500,
            5000
    ];

    function delayNext()
    {
        setTimeout(function() {
            $("ul li:eq(" + index + ")").addClass("go").siblings().removeClass("go");
            index++;

            if (index == length)
                index = 0;

            delayNext();
        }, delays[index]);
    }

    delayNext();
});

http://jsfiddle.net/rfvgyhn/9VL4r/2/

于 2011-02-10T21:30:04.480 に答える
0

4つのキューを次のようなものに変更しました。

$('ul li:nth-child(1)').delay(4500)
                       .queue(function() {
                           $('ul li').removeClass( "go" );
                           $(this).addClass("go");
                           $(this).dequeue();
                       });

全体は次のとおりです。http：//jsfiddle.net/ChrisMH/bM6uY/18/

于 2011-02-10T21:34:02.610 に答える