JSFiddle - React, Tailwind, and code Playground

by herodrigues

HTML

<button id="btn1">fade out</button>
<button id="btn2">show</button>
 
<div id="log"></div>
 
<div id="box1" class="box">linear</div>
<div id="box2" class="box">swing</div>

CSS

.box,
  button {
    float: left;
    margin: 5px 10px 5px 0;
  }
  .box {
    height: 80px;
    width: 80px;
    background: #090;
  }
  #log {
    clear: left;
  }

JavaScript

$( "#btn1" ).click(function() {
  function complete() {
    $( "<div>" ).text( this.id ).appendTo( "#log" );
  }
  $( "#box1" ).fadeOut( 100, "linear", complete );
  $( "#box2" ).fadeOut( 100, complete );
});
 
$( "#btn2" ).click(function() {
  $( "div" ).show();
  $( "#log" ).empty();
});