JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="qcss_demo">

</div>

CSS

.qcss_demo {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background-color: grey;
  transition: 0.2s;
}

JavaScript

$.fn.extend({
  qcss: function(css) {
    return $(this).queue(function(next) {
      $(this).css(css);
      next();
    });
  }
});

$('.qcss_demo')
  .delay(1000)
  .qcss({ height: '20px' })
  .delay(100)
  .qcss({ height: '50px' })
  .delay(200)
  .qcss({ height: '20px' })
  .delay(300)
  .qcss({ height: '280px' })