CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Flankjank
Flankjank

Reputation: 19

Javascript quotes ... fade in and out

Good afternoon and happy 4th I've run into issues working on some javascript....I'm a beginner who's using this particular online sample of how to get a fade in and out of multiple quotes...

I've implemented the HTML/the Javascript/the CSS....yet nothing seems to be working out when checking my page using chrome... can someone help me out in terms of what should be changed or other JS examples that may work better?

It always seems like 80% of the Js codes I try fail to appear on my web page....OR is it my HTML or css... blarg! -F

<....HTML.....JAVASCRIPT......CSS.....order.....>

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

(function() {

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

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

    showNextQuote();

})();

.quotes {display: none;}

Upvotes: 1

Views: 834

Answers (1)

Mina Jacob
Mina Jacob

Reputation: 1951

it works perfectly fine for me , see this link http://codepen.io/mozzi/pen/xOApkb

exactly the same 

(function() {

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

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

    showNextQuote();

})();

Upvotes: 1

Related Questions