Skip to content Skip to sidebar Skip to footer
Home / Css / Fadein / Fadeout / Html / Jquery

Fade-in Fade-out With Css And Jquery

Post a Comment
Here's the complete HTML code that i applied to make 2 quotes fadein and fade out simultaneously .. it works in jfiddle but not on my webpage. Can anyone tell me whats wrong? Here'

Solution 1:

Add:

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

in your head or body tag.

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8" /><title>Untitled Document</title><style>.quotes {display: none;}​
</style></head><body><h2class="quotes">first quote</h2><h2class="quotes">second quote</h2>​

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script>
(function() {

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

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

    showNextQuote();

})();
</script></body></html>

Post a Comment for "Fade-in Fade-out With Css And Jquery"