JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="test">delay_addClass()</div>
<div id="test2">delayMethod</div>
<div id="test3">queueMethod</div>

CSS

.blue {
    color: blue;
}

JavaScript

jQuery.registerDelayMethod = function(methodName) {
    jQuery.fn["delay_" + methodName] = function(delay /* args */) {
        var args = Array.prototype.slice.call(arguments, 1);
        var self = this;
        self.delay(delay);
        self.queue(function(next) {
            self[methodName].apply(self, args);
            next();
        });
        return this;
    };
}

// create delay_addClass(),
// delay_removeClass() and delay_css()
$.registerDelayMethod("addClass");
$.registerDelayMethod("removeClass");
$.registerDelayMethod("css");

$("#test").delay_addClass(2000, "blue")
    .slideUp(1000)
    .delay(1000)
    .slideDown(1000)
    .delay_removeClass(1000, "blue")
    .delay_css(1000, "color", "red")
    .delay_css(1000, "font-size", "30px");

jQuery.fn.delayMethod = function(delay, methodName /* arg1, arg2, ... */) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 2);
    self.delay(delay);
    self.queue(function(next) {
        self[methodName].apply(self, args);
        next();
    })
    return this;
}

$("#test2")
    .delayMethod(2000, "addClass", "blue")
    .slideUp(1000)
    .delay(1000)
    .slideDown(1000)
    .delayMethod(1000, "removeClass", "blue")
    .delayMethod(1000, "css", "color", "red")
    .delayMethod(1000, "css", "font-size", "30px");


jQuery.fn.queueMethod = function(methodName /* arg1, arg2, ... */) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    self.queue(function(next) {
        self[methodName].apply(self, args);
        next();
    })
    return this;
}

$("#test3")
    .delay(2000)
    .queueMethod("addClass", "blue")
    .slideUp(1000)
    .delay(1000)
    .slideDown(1000)
    .delay(1000)
    .queueMethod("removeClass", "blue")
    .delay(1000)
    .queueMethod("css", "color", "red")
    .delay(1000)
    .queueMethod("css", "font-size", "30px");