JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<button id="go">go</button><br />

<div style="background-color: #009f00; height: 0px; overflow:hidden;">this is a div</div>

JavaScript

$('#go').on('click', function () {
    var progress = 0,
        interval_id,
        total_time = 1,
        target = 200,
        exponential_num = 0;
    
    $('div').css('height', '0px');
    
    interval_id = setInterval(function () {
        if (progress + exponential_num < target) {
            
            $('div').css('height', progress + exponential_num + 'px');
            exponential_num = (progress %2 === 0 ? exponential_num + 5: exponential_num);
            progress = progress + 1;        
        } else {
            clearInterval(interval_id);
        }
    }, total_time);
});