JSFiddle - React, Tailwind, and code Playground

HTML

<div id='myElement' class='blue'>content</div>

CSS

div {
    width: 100px;
    height: 100px;
}

.blue {
    background: blue;
    position:relative;
    left: 20px;
}
.myClass {
    background:red;
    margin-top: 50px;
}

JavaScript

var animating = false;
var interval;
$('#myElement').hover(
    function() {
        var $th = $(this);
        if(!animating && !interval) {
            $th.clearQueue();
            animating = true;
            $th.addClass('myClass',500,function() {animating=false;});
        }
    },
    function() {
        var $th = $(this);
        if(interval) return false;
        if(animating) {
            interval = setInterval(function() {
                if(!animating) {
                    $th.clearQueue();
                    animating = true;
                    $th.removeClass('myClass',500, function(){animating = false;});
                    clearInterval(interval);
                    interval = null;
                }},50)
                } else {
                $th.clearQueue();
            $th.removeClass('myClass',500, function(){animating = false;});
        }
    }
);