JSFiddle - React, Tailwind, and code Playground

by danheberden

HTML

<a class="disp">Reg</a>
<a class="disp-hidden">hidden</a>
<a class="disp-inline-block">inline-block</a>
<a class="disp-block">block</a>
<div id="output"></div>

<!-- The issue is that I want to be able to decide the ending display when the fadeIn occurs. I want it to end on a 100px by 100px square, but the fadeIn effect doesn't allow that. -->

CSS

a {
    height: 100px;
    width: 100px;
    background-color: Red;
}
.disp-hidden { display:none; }
.disp-inline-block { display:inline-block; }
.disp-block { display:block; }

JavaScript

$(document).ready(function() {
    var $o = $( '#output' );
    $('a').fadeOut(800).fadeIn(800)
        .each( function() {
            var $this = $(this);
            $o.append( "<div>" + $this.attr( 'className' ) 
                  + ": " + $this.css( 'display' ) + "</div>" );
        });
    
});