JSFiddle - React, Tailwind, and code Playground

HTML

<button id="theButton">Toggle images</button>

<hr />

<div id="description">
</div>
<img id="theImage" src="" />

JavaScript

$(function() {
    function changePic(imgNode, newPic, desc){
        var imgNode = $(imgNode);
        var descNode = $("#description");

        imgNode.fadeTo(500, 0, function(){
            $(this)
                .load(function() {
                    $(this).fadeTo(1500, 1);
                })
                .attr("src", newPic)
                .attr("alt", desc);
            descNode.text(desc);
        });
    }

    //Some large images I found on the net..
    $("#theButton").toggle(function(){
        changePic($("#theImage"),
                  "http://www.forestwander.com/wp-content/original/2009_02/fall-nature-trail.jpg",
                  "Nature image 1");
    }, function(){
        changePic($("#theImage"),
                  "http://www.forestwander.com/wp-content/original/2009_02/shavers-fork-camping.jpg",
                  "Nature image 2");
    }, function(){
        changePic($("#theImage"),
                  "http://www.forestwander.com/wp-content/original/2009_02/trail-sun-shining-north-fork.jpg",
                  "Nature image 3");
    });
    
    //Load init
    changePic($("#theImage"),
          "http://www.forestwander.com/wp-content/original/2009_02/sun-shining-through-trail.jpg",
          "Nature image 0");
});