JSFiddle - React, Tailwind, and code Playground

by wittnl

HTML

<button id="animateBtn">doAnimate</button>
<div id="sFrame">
    <p>Lorem ipsum dolor sit amet</p>
    <p>Box animate testing</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Box animate testing</p>
    <div id="box">&nbsp;</div>
</div>

CSS

p {
    margin: 1em 0;
}

#box {
    width: 100px;
    height: 100px;
    background-color: #333;
}

#sFrame {
    height: 200px;
    overflow-y: scroll;
}

JavaScript

$(document).ready(function(){
    
    var box = $('#box');
    
    box.fadeTo(0,0).hide();

    
    var doAnimate = function(e){
        
        //box.animate({"height":"hide"},{duration: 1000});
        //box.animate({"height":"show"},{duration: 1000});
        //box.animate({"width":"hide"},{duration: 1000});
        //box.animate({"width":"show"},{duration: 1000});
        box.slideDown(1000);
        box.fadeTo(1000, 1);
        
    }
    
    $('#animateBtn').click(doAnimate);
        
});