JSFiddle - React, Tailwind, and code Playground

by ravatsinh

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/main.css">
    <title>jQuery fade-ins with a JavaScript for() loop</title>
</head>
<body>    
 
        <div id="elem0" class="toBeFaded">Here's the first message...</div>
        <div id="elem1" class="toBeFaded">We have second one here...</div>
        <div id="elem2" class="toBeFaded">And here's the third message...</div>
        <div id="elem3" class="toBeFaded">OMG!!! Here's the fourth message!</div>
 
    <script src="js/jquery-1.7.1.min.js"></script>
 
    <script src="js/fadeCode.js" defer="defer"></script>
 
</body>
</html>

CSS

.toBeFaded {
    display: none;
    position:absolute;
    font-size:70pt;
}

JavaScript

$(function (){
 
    var yourFade = 1, // the amount of time in seconds that the elements will fade in AND fade out
        yourDelay = 2, // the amount of time in seconds that there will be a delay between the fade ins and fade outs
        fadeTime = yourFade * 1000, //convert fade seconds to milliseconds (1000)
        delayTime = yourDelay * 1000, // convert delay seconds to milliseconds (2000)
        totalTime = fadeTime + delayTime, //3000 milliseconds...needed for all those delays we talked about
        allElems, // find out exactly how many page elements have the 'toBeFaded' class (4)
        elemNoFade, // Will help us find the last element represent the last element (3)
        i,
        fadingElem;
 
    for (i = 0, allElems = $('.toBeFaded').length, elemNoFade = allElems - 1; i < allElems; i+=1) {
        fadingElem = "#elem" + i;
        if (i === 0) {
            $(fadingElem).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
        } else if (i === elemNoFade) {
            $(fadingElem).delay(totalTime * i).fadeIn(fadeTime);
        } else {
            $(fadingElem).delay(totalTime * i).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
        }
    }
});