Question

So basically I have multiple div classes called quote that contains a text and a blockquote. How can I make it so it fades to the next quote class every 5 seconds?

Here’s what the markup looks like:

<div id="quoteWrapper">
<div class="quote">

    <blockquote>Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

<div class="quote">

    <blockquote>Second Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

<div class="quote">

    <blockquote>Third Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>
</div>

Answer 1

There is a similar question here. What I would do is create an interval that uses jquery to fade out the current quote and fades in the next in the callback. You can do this by adding a class to determine which quote is currently shown

<div class="quote visible">

    <blockquote>Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

<div class="quote">

    <blockquote>Second Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

then

setInterval(showQuote, 5000);

...

function showQuote() {
    // get visible quote
    $('.quote.visible').fadeOut(function() {
        // remove visible class from old quote and add it to new
        // get next quote and fadeIn() when fadeout finishes
    });
}