1

重複の可能性：
jqueryは.addClassにフェードを追加します

これが私のjsFiddleの例です：http：//jsfiddle.net/sLzGc/

オプション1から3が回転しているように見えるエフェクトを作成しようとしています。1.2秒ごとに、greenクラスはそれを含むオプションから削除され、greenクラスは次のオプションに追加されます。i<5最終的な関数alert('Finished')が実行される前に、3つのオプションのローテーションが5回（）行われるという考え方です。

setTimeout（）を使用しようとしていますが、、.delay()別のjQuery関数、またはその他のオプションを使用できます。

これが私のJavaScript/jQueryです：

alert('Start');

sampleFunction();

function sampleFunction() {

for (i=0; i<5; i++) {

  setTimeout(function() {
    $('#option2').addClass('green');
    $('#option1').removeClass('green');
  },1200);

  setTimeout(function() {
    $('#option3').addClass('green');
    $('#option2').removeClass('green');
  },1200);

  setTimeout(function() {
    $('#option1').addClass('green');    
    $('#option2').removeClass('green');
  },1200);

}//end for loop

}

alert('Finished');​

私の全体の例はjsFiddleにあります：http：//jsfiddle.net/sLzGc/

あなたが提供できる助けや洞察に感謝します！

4

4 に答える 4

2

これが私が問題に取り組む方法です：

​(​function() {
    var options = [$("#option1"), $("#option2"), $("#option3")],
        cycles = 5,
        i = 0,
        $last = $(null);

    (function next() { 
        if(i < cycles * options.length) {
            $last.removeClass("green");
            $last = options[i % options.length].addClass("green");
            i++;
            setTimeout(next, 1200);
        } else {
            $last.removeClass("green");
            alert("finished!"); //do any other "we're done" stuff here.
        }
    }());
}());​

それは非常に簡単で、クールな部分は、要素のリストに要素を追加して、非常に簡単に循環できることです（要素をに追加するだけoptionsです）。必要に応じて、サイクル数を設定することもできます。クラスや遅延の長さを変数にしませんでしたが、そうしたい場合は非常に簡単です。

ここでデモを見ることができます：

http://jsfiddle.net/D7SR8/

また、最後にコールバック関数を配置しalert()、そこに配置することを検討することもできます。それはより再利用可能です。

于 2012-09-08T01:28:49.210 に答える
1

setTimeoutsを使用する場合、コードは次のようになります。

var iteration = 0;
alert('start');
rotateColors();

function rotateColors() {
    setTimeout(function() {
        $('#option2').addClass('green');
        $('#option1').removeClass('green');
            setTimeout(function() {
                $('#option3').addClass('green');
                $('#option2').removeClass('green');
                setTimeout(function() {
                    $('#option1').addClass('green');    
                    $('#option3').removeClass('green');
                    iteration += 1;

                    if(iteration < 5)
                        rotateColors();
                    else
                        alert('finished');
            },1200);
        },1200);
    },1200);   
}

ライブデモ

于 2012-09-08T01:05:40.163 に答える
0 
alert('Start');
 var varobj=0;
sampleFunction();

function sampleFunction() {
setTimeout(function() {
    $('#option2').addClass('green');
    $('#option1').removeClass('green');

  },1200, setTimeout(function() {
        $('#option3').addClass('green');
        $('#option2').removeClass('green');

      },1200,setTimeout(function() {
            $('#option1').addClass('green');    
            $('#option3').removeClass('green'); if(varobj<5){varobj=varobj+1;sampleFunction();}else{ alert('finished');}
      },1200);););}

これは、settimeoutで他の実行後に関数を呼び出す方法のアプローチです。

于 2012-09-08T01:22:18.007 に答える
0

との両方を使用setTimeout()しsetInterval()てこれを実行し、5回の実行後に間隔をクリアします。それらをすべて特定の色または他の変更で終了させたい場合は、私に知らせてください！私はあなたが尋ねた方法をループするようにそれを修正しました。 http://jsfiddle.net/sLzGc/9/

sampleFunction();

function sampleFunction() {
    alert('Start');
    $('#option1').addClass('disabled');

    var i = 0;
    var shift = function() {
        setTimeout(function() {
            $('#option1').toggleClass('disabled');
            $('#option2').toggleClass('disabled');
        }, 0);
        setTimeout(function() {
            $('#option2').toggleClass('disabled');
            $('#option3').toggleClass('disabled');
        }, 400);
        setTimeout(function() {
            $('#option3').toggleClass('disabled');
            $('#option1').toggleClass('disabled');
        }, 800);
    };
    var interval = setInterval(function() {
        ++i;
        if (i == 5) {
            clearTimeout(interval);
            alert('Finished');
        } else {
            shift();
        }
    }, 1200);

    shift();
}​
于 2012-09-08T01:25:02.023 に答える