JSFiddle - React, Tailwind, and code Playground

by spinal007

HTML

<div id="target_element"></div>

CSS

#target_element {
    width  : 100px;
    height : 100px;
    border : 1px solid #FDFDFD;
    background: #876B46;
}

JavaScript

var target_el = $('#target_element'),
    colors    = ['#876B46', '#9E815A', '#D6BC98'],
    index     = 0,
    timer;

$( function () {
    timer = setInterval(function () {
        if (index in colors) {
            target_el.css({
                'background-color' : colors[index]
            });
            index++;
        } else {
            index = 0;
            //clearInterval(timer);
        }
    }, 50);
}).on('mouseleave', function () {
    target_el.css({
        'background-color' : ''
    });
});

target_el.on('mouseenter', function () {
   clearTimeut(index); 
});