JSFiddle - React, Tailwind, and code Playground

by jimibt

HTML

<span id="strapline">
    <span id="strap1">Buy Goods Online</span>
    <span id="strap2"> - Sell Goods Online</span>
    <span id="strap3"> - Simple & Easy</span>
</span>

CSS

body{
    background: #222;
}

#strapline{
    color: #FFCA16;
}

JavaScript

// hide the strapline pre-fadein
$('#strapline').children().hide();

// grab the existing color of the strapline
var color = $('#strapline').css('color');

// set it to white for now
$('#strapline').css({
    'color': '#fff'
});

// run the fadin functions (this is the section where chaining would be desired)
$('#strap1').fadeIn(1300, function() {
    setTimeout(function() {
        $('#strap2').fadeIn(1300);
    }, 200);
    setTimeout(function() {
        $('#strap3').fadeIn(1300, function() {
            $('#strapline').css({
                'color': '#fff'
            }).animate({
                'color': color
            }, 3000);
        });
    }, 1500);
});