JSFiddle - React, Tailwind, and code Playground

by Ian Oxley

HTML

<div id="foo"></div>

CSS

div {
    background-color:#000;
    border:1px solid #ccc;
    height:200px;
    margin:10px auto;
    transition-property:background-color;
    -moz-transition-property:background-color;
    -webkit-transition-property:background-color;
    transition-duration:1s;
    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
    width:400px;
}

JavaScript

$.widget('ianoxley.colour', {
    options: {
        backgroundColor: '' 
    },
    _create: function() {
        var el = this.element;
        el.data('original-colour', el.css('backgroundColor'));
        this._refresh();
    },
    _refresh: function() {        
        var el = this.element;
        el.css(this.options);
    },
    destroy: function() {
        var el = this.element,
            originalBg = el.data('original-colour');
        
        this.options.backgroundColor = originalBg;               
        this._refresh();
    },
    _setOptions: function() {
        $.Widget.prototype._setOptions.apply(this, arguments);
        this._refresh();        
    },
    _setOption: function(key, value) {
        $.Widget.prototype._setOption.call(this, key, value);
    }
});

var colours = ['yellow','green', 'cyan', 'blue', 'magenta', 'red'],
    $elem = $('#foo'),
    index = 0;

$('#foo').colour();

var intervalId = setInterval(function() {
    $elem.colour('option', 'backgroundColor', colours [index++ % colours .length]);
}, 2000);

setTimeout(function() {
    clearInterval(intervalId);
    $('#foo').colour('destroy');
}, 20000);