text - jQuery テキスト アニメーション ヘルプ。最後の単語で停止

Question

私はこのコードを見つけました、そしてそれはうまくいきます！しかし、最後の単語に到達したときにどうすれば停止できますか?

(function(){

    // List your words here:
    var words = [
        'awesome',
        'incredible',
        'cool',
        'fantastic'
        ], i = 0;

    setInterval(function(){
        $('#changerificwordspanid').fadeOut(function(){
            $(this).html(words[i=(i+1)%words.length]).fadeIn();
        });
       // 2 seconds
    }, 2000);

})();

Answer 1

アニメーションのコードを開始する前に、配列に単語があるかどうかを確認し、そうでない場合は間隔を停止します。

(function(){

// List your words here:
var words = [
    'awesome',
    'incredible',
    'cool',
    'fantastic'
    ], i = 0;

var interval = setInterval(function(){
    if(i+1 < words.length) {
        $('#changerificwordspanid').fadeOut(function(){
            $(this).html(words[i=(i+1)%words.length]).fadeIn();
        });
    } else {
        window.clearIntervall(interval);
    }
   // 2 seconds
}, 2000);

})();

クリア間隔はここにあります: http://de.selfhtml.org/javascript/objekte/window.htm#clear_interval

Answer 2

こうすることで間隔を空けることができ、スムーズに単語を追加し続けることができます。

(function(){

// List your words here:
var words = [
    'awesome',
    'incredible',
    'cool',
    'fantastic'
    ], i = 0;

(function loop(){
    $('#changerificwordspanid').fadeOut(function(){
        // send the loop function to fadeIn, It will exec when fadeIn complete
        $(this).html(words.shift()).fadeIn(loop);
    });
})();

})();

各フェードイン効果が完了した後、2 秒の遅延も必要な場合。これを行う

(function(){

// List your words here:
var words = [
    'awesome',
    'incredible',
    'cool',
    'fantastic'
    ], i = 0;

(function loop(){
    $('#changerificwordspanid').fadeOut(function(){
        // settimeout for 2 sec before called loop
        $(this).html(words.shift()).fadeIn(function(){
           setTimeout(loop, 2000);
        });
    });
})();

})();