JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="logo">
    <h1>
        <span>A</span><span>n</span><span>t</span><span>o</span><span>n</span><span>i</span><span>o</span><span>R</span><span>o</span><span>s</span><span>s</span><span>i</span>
    </h1>
    <h2>composer</h2>
</div>

CSS

#logo span {display: none;}

JavaScript

$.fn.fadeInSuccessive = function(t, fn) {
    var index = 0;
    var self = this;

    function next() {
        if (index < self.length) {
            self.eq(index++).fadeIn(t, next);
        } else {
            if (fn) {
                fn.call(self);
            }
        }
    }
    next();
}
    
$("#logo span").fadeInSuccessive(1000, function() {
    $(document.body).append("<br>Done!");
});