JSFiddle - React, Tailwind, and code Playground

by Corey Frang

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery-ui.css">
<button>click</button>
<div id="test">
</div>
Click twice - note that the first animation seems to work okay... (using black as a border color to animate too seems odd, but it works...)  The second click will do nothing with the borders and then pop them into place...

CSS

#test {
    width: 100px;
    height: 100px;
    background: #abcdef;
    border: 10px solid red;
}

#test.test {
    background: green;
    border: none;
}

JavaScript

$("button").button().click(function() {
    $("#test").toggleClass("test", 1000);
});