JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<script src="http://rov.hopto.org/mysite/js/jquery.animateToClass.js"></script>
<script src="http://rov.hopto.org/mysite/js/jquery.color.js"></script>
<div id='myElement' class="blue">content</div>

CSS

div {
    position: absolute;
    top:10px;
}

.blue {
    background-color: #0000ff;
    left: 20px;
    width: 100px;
    height: 100px;
}

.red {
    background-color: #ff0000;
    left:50px;
    width: 200px;
    height: 75px;
}

JavaScript

$('#myElement').hover(
    function() {
        var t = $(this);
        t.html("hover");
        t.stop(1).animateToClass('red',1000);
    },
    function() {
        var t = $(this);
        t.html("content");
        t.stop(1).animateToClass('blue',1000);
    }
);