JSFiddle - React, Tailwind, and code Playground

by alnitak

HTML

<div id="holder">
    <div id="target" style="display:none"></div>
</div>

<button id="start">Start</button>

CSS

#holder {
    height: 40px;
}

JavaScript

$('document').ready(function() {


    $('#start').click(function() {
        $('#target')
            .stop(true, true)
            .queued('html', 'This is one')
            .fadeIn(1000)
            .fadeOut(2000)
            .queued('html', 'This is two')
            .queued('css', 'color', '#dc0000')
            .fadeIn(1000)
            .fadeOut(2000)
            .queued('html', 'This is three')
            .queued('css', 'color', '#990099')
            .fadeIn(1000)
            .fadeOut(2000);
    });
});

(function($) {
    $.fn.queued = function() {
        var self = this;
        var func = arguments[0];
        var args = [].slice.call(arguments, 1);
        return this.queue(function() {
            $.fn[func].apply(self, args).dequeue();
        });
    }
}(jQuery));