jquery - Fade in and Fade Out Text in DIV - Remove Loop -
i have created div 3 different quotes fade in , fade out.
i using below jquery code same.
(function() { var quotes = $(".changetxt"); var quoteindex = -1; function shownextquote() { ++quoteindex; quotes.eq(quoteindex % quotes.length) .fadein(1000) .delay(4000) .fadeout(500, shownextquote); } shownextquote(); })();
html code
<div class="toptext"> <div class="changetxt"> ”the simple act of paying positive attention to<br> people has great deal productivity” <p>- tom peters</p> </div> <div class="changetxt"> ”if deprive of outsourcing , competitors<br> not, putting 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>
it working perfect don't want loop, there 3 quotes, shows last (third) quote should stop animation , no loop.
how can achieve this?
check if quoteindex
in third execution. if is, 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
to have last quote stay, can use different approach in conditionally call 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(); })();
Comments
Post a Comment