JSFiddle - React, Tailwind, and code Playground

by ripper234

HTML

<div id='box'>
</div>    
    
<div class='debug'>
</div>

CSS

#box {
  width: 100px;
  height: 100px;
  background-color: green;
  display: none;    
}
.debug {
    position: fixed;
    top: 300px;
    width:600px;
    height:300px;
    padding: 10px;
    background-color:black;
    color:green;
}

JavaScript

var stopDone = true;
function log(msg) {
    $(".debug").append(new Date() + " - " + msg + "<br/>");
}

log("Starting");

$("#box")
  .delay(2000)
  .show("slow")
  .delay(2000)
  .promise()                            
  .then(function(){log("Done");});     // when all the animations are done, call my function.

if (stopDone) {
  setTimeout(function(){
    $("#box").clearQueue();
    $("#box").stop(true);
        }, 1000);
}