JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<div class="box"></div>
<div id="path">
  <button id="go">Go</button>
  <br>
  <button id="bstt">.stop(true,true)</button>
  <button id="bcf">.clearQueue().finish()</button>
  <br>
  <button id="bstf">.stop(true, false)</button>
  <button id="bcs">.clearQueue().stop()</button>
  <br>
  <button id="bsff">.stop(false, false)</button>
  <button id="bs">.stop()</button>
  <br>
  <button id="bsft">.stop(false, true)</button>
  <br>
  <button id="bf">.finish()</button>

</div>

CSS

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 15px;
  height: 15px;
  background: black;
}
#path {
  height: 300px;
  font-size: 70%;
  border-left: 2px dashed red;
  border-bottom: 2px dashed green;
  border-right: 2px dashed blue;
}
button {
  width: 12em;
  display: block;
  text-align: left;
  margin: 0 auto;
}

JavaScript

var horiz = $("#path").width() - 20,
    vert  = $("#path").height() - 20
$("#go").on("click", function(){
  $(".box")
    .clearQueue()
    .stop()
    .css({ left: 10, top: 10 })
    .animate({ top:  vert }, 3000)
    .animate({ left: horiz }, 3000)
    .animate({ top:  10 }, 3000);
});
$("#bstt").on("click", function(){
  $(".box").stop(true,true);
});
$("#bs").on("click", function(){
  $(".box").stop();
});
$("#bsft").on("click", function(){
  $(".box").stop(false,true);
});
$("#bf").on("click", function(){
  $(".box").finish();
});
$("#bcf").on("click", function(){
  $(".box").clearQueue().finish();
});
$("#bsff").on("click", function(){
  $(".box").stop(false,false);
});
$("#bstf").on("click", function(){
  $(".box").stop(true,false);
});
$("#bcs").on("click", function(){
  $(".box").clearQueue().stop();
});