JSFiddle - React, Tailwind, and code Playground

Animate

by Jennifer Perrin

HTML

<div class="ex1">
    <div id="elem1">bob</div>
    <div id="elem2"></div>
    <div id="elem3"></div>
</div>

    <div class="clearAll"></div>

<div class="ex2">
    <div id="elem4"></div>
    <div id="elem5"></div>
    <div id="elem6"></div>
</div>    
    
    <div class="clearAll"></div>
    
<div class="ex3">
    <div id="elem7"></div>
    <div id="elem8"></div>
</div>

    <div class="clearAll"></div>
    
<div class="ex4">
    <button>Toggle</button>
    <div id="elem9"></div>
</div>

CSS

/* -- Housekeeping -- */
body { margin: 50px; }
.clearAll { clear: left; min-height: 6px; }
.ex1 { width: 520px; height: 70px; }
.ex2, .ex3 { width: 70px; height: 160px; }
.ex4 { width: 20px; height: 250px; margin-top: 6px; }

/* -- Animate and Slide! -- */
#elem1, #elem2, #elem3 {
    width: 10px;
    height: 20px;
}
#elem1 { background: #E74B4E; }
#elem2 { background: #F79820; margin-top: 3px; }
#elem3 { background: #A9CE22; margin-top: 3px; }

#elem4, #elem5, #elem6 {
    width: 20px;
    height: 10px;
}
#elem4 { background: #E74B4E; float: left; }
#elem5 { background: #F79820; float: left; margin-left: 3px; }
#elem6 { background: #A9CE22; float: left; margin-left: 3px; }

#elem7, #elem8 {
    width: 20px;
    display:none;
}
#elem7 { background: #E74B4E; float: left; height: 100px; }
#elem8 { background: #F79820; float: left; height: 150px; margin-left: 3px; }

#elem9 {
    width: 20px;
    height: 200px;
    background: #E74B4E;
}

JavaScript

$('#elem1').animate({width: '100%'}, 2500);
$('#elem2').animate({width: '60%'}, 2500);
$('#elem3').animate({width: '85%'}, 2500);

    $('#elem1').click(function() {
        $('#elem1').animate( { width: '1%' }, 200);
        $('#elem1').animate( { width: '100%' }, 1500);
    });


$('#elem4').animate({height: '60%'}, 2500);
$('#elem5').animate({height: '100%'}, 2500);
$('#elem6').animate({height: '30%'}, 2500);

$("#elem7").slideDown("slow");
$("#elem8").slideDown("slow");

$("button").click(function () {
    $("#elem9").slideToggle("slow");
});