淡入淡出DIV文本 - 刪除循環

-1

我創建了一個帶3個不同引號的DIV淡入淡出。淡入淡出DIV文本 - 刪除循環

我正在使用下面的jQuery代碼相同。

(function() { 
var quotes = $(".changetxt"); 
var quoteIndex = -1; 
function showNextQuote() { 
    ++quoteIndex; 
    quotes.eq(quoteIndex % quotes.length) 
     .fadeIn(1000) 
     .delay(4000) 
     .fadeOut(500, showNextQuote); 
} 
showNextQuote(); 
})();

HTML代碼

<div class="toptext"> 
    <div class="changetxt"> 
     」The simple act of paying positive attention to<br> 
     people has a great deal to do with productivity」 
     <p>- Tom Peters</p> 
    </div> 

    <div class="changetxt"> 
     」If you deprive yourself of outsourcing and your competitors<br> do not, you are putting yourself out of business」 
     <p>- Lee Kuan Yew</p> 
    </div> 

    <div class="changetxt"> 
     」Focus on being PRODUCTIVE<br> 
     instead of busy」 
     <p>- Tim Ferris</p> 
    </div> 
</div>

這是工作完美，但我不想循環，有3個報價，所以只要它表明最後一個（第三）報價，應立即停止動畫和沒有循環。

我該如何做到這一點？

來源

2015-05-29 Manoj Soni

檢查quoteIndex是否在第三次執行中。如果是，那麼return

(function() { 
    var quotes = $(".changetxt"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     if (quoteIndex == 2) { 
      return; 
     } 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(1000) 
      .delay(4000) 
      .fadeOut(500, showNextQuote); 
    } 
    showNextQuote(); 
})();

更新

爲了有最後的報價入住期間，您可以使用不同的方法中，你有條件地fadOut

(function() { 
    var quotes = $(".changetxt"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(1000) 
      .delay(4000); 
     if(quoteIndex < 2){ 
      quotes.eq(quoteIndex % quotes.length).fadeOut(500, showNextQuote); 
     } 
    } 
    showNextQuote(); 
})();

來源

2015-05-29 11:47:52 AmmarCSE

這工作完全唯一的事情是在最後一個報價出現後，div變空了，我寧願要留下最後一個報價。 –

@ManojSoni，看到我的更新 – AmmarCSE

這正是我想要的，謝謝Zillion mate ... –

只是不在第三次後調用該功能，如下所示：

(function() { 
    var quotes = $(".changetxt"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     quoteIndex += 1; 

     if (quoteIndex === 3) return; 

     quotes.eq(quoteIndex % quotes.length) 
     .fadeIn(1000) 
     .delay(4000) 
     .fadeOut(500, showNextQuote); 
    } 

    showNextQuote(); 
}());

來源

2015-05-29 11:48:55

循環停在空格，我寧願要最後一句留下來，爲你的裁判，我粘貼有問題的HTML –

在showNextQuote內部，而不是返回將quoteIndex設置回零。

function showNextQuote（）{ quoteIndex + = 1;

**if (quoteIndex === 3) quoteIndex = 0;** 

    quotes.eq(quoteIndex % quotes.length) 
    .fadeIn(3000) 
    .delay(4500) 
    .fadeOut(500, showNextQuote); 
}

來源

2016-07-30 18:48:18

淡入淡出DIV文本 - 刪除循環

回答

相關問題