JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<div id="main">
<div id="content">
    
        <img src="http://lorempixel.com/400/200/"></img>
    
</div>
</div>
<button id="click">start animation</button>

CSS

#main{
    height:200px;
}

JavaScript

$("#click").on("click", function () {
    $('#content').fadeOut({
        duration: 1000,
        // run when the animation is complete
        complete: function () {
           
            $("img").attr("src","http://lorempixel.com/400/200/sports/")
        },
        // run when the animation is complete + 
        //it's promise is resolved
        done: function () {
            $('#content').fadeIn(2000);
        }
    });
});