JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="new" id="newWordButton"/>
<div id="wordsDiv">
</div>

JavaScript

$(document).ready(function() {
    var word = 'pneumonoultramicroscopicsilicovolcanoconiosis';
    $('#newWordButton').click(animateLetters);

    function animateLetters() {
        (function changeLetter(i) {
            if (i == word.length) return;

            var currentLetter = word.charAt(i);
            console.log(currentLetter);

            $('#wordsDiv').empty();
            var img = new Image();
            img.src = 'http://placehold.it/100x100/&text=' + currentLetter;

            img.onload = function() {
                $(img).appendTo('#wordsDiv').hide().fadeIn(1000, function() {
                    $('#wordsDiv img').delay(1000).fadeOut(1000, function() {
                        changeLetter(i + 1);
                    });
                });
            };
        })(0);
    }
});