Fade In и Fade Out Text в DIV - Remove Loop

Question

Я создал 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 цитаты, так как только он показывает последний (третий) котировка он должен остановиться анимация и отсутствие цикла.

Как я могу это достичь?

Answer 1

Проверьте, если 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(); 
})(); 

Update

Чтобы иметь последнюю цитату пребывания, вы можете использовать другой подход, при котором вы условно называем 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(); 
})(); 

Answer 2

Только не вызовите функцию после третьего раза, например:

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

Answer 3

Внутри showNextQuote вместо возврата установите quoteIndex обратно в ноль.

function showNextQuote() { quoteIndex + = 1;

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

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