Fade in & out text loop - jQuery

jquery

Solution

You could do it like this:

CSS:

.quotes {display: none;}​

HTML:

<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>​

Javascript:

// code gets installed at the end of the body (after all other HTML)
(function() {

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

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();​

Working demo: http://jsfiddle.net/jfriend00/n4mKw/

This code will work for any number of quotes you have, not just two. If you have content after the quotes, you will likely want to fix the size of the container the quotes are in so that it doesn't change size as you go from one quote to the next (causing the other page contents to jump around).

Problem

I have two quotes wrapped in H2 tags that I want to fade in and out using jQuery. When the page loads I want the first quote to fade in, delay for a few seconds and fade out then the next quote to do the same. I would like it to continue to loop through the two quotes. Any help would be greatly appreciated.

Original source