JSFiddle - React, Tailwind, and code Playground

by Addy Osmani

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(1600, "linear", complete);  
    
$("#box2").fadeOut(1600, complete);

});



$("#btn2").click(function(){  
    $("div").fadeIn(500);  
    $("#log").empty();
});