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);
        });
    });
})();

})();

jQuery文本动画帮助。最后一句话

2 个答案: