JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" onclick="showItBad();">show (fast, ok)</a>
	<a href="javascript:showItOk();">show (too slow)</a>
    <hr>
    <div id="example"></div>

CSS

#example {
    width: 10%;
    height: 50px;
    background: red;
}

JavaScript

function showIt(duration, complete)
{
    jQuery('#example').animate(
        { width: '100%' },
        duration,
        complete
    );
}
function reset()
{
    jQuery('#example').css(
        { width: '10%' }
    )
}
window.showItBad = function showItBad(time)
{
    showIt(prompt('animation time (ms)', 2000), reset)
}
window.showItOk = function showItOk(time)
{
    showIt(parseFloat(prompt('animation time (ms)', 2000)), reset)
}