JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myGallery">
    <img id="imgOld" src="http://www.colorcombos.com/images/colors/hex-codes/FF9900.png" />
    <img id="imgNew" src="http://www.colorcombos.com/images/colors/hex-codes/003366.png" />
    
</div>
<input type=button id=switch value=switch>

CSS

#myGallery{
      position:relative;
      width:100px;
      height:100px;
    }

    #myGallery img{
      position:absolute;
      top:0;
    }

    #myGallery img.active{
      display:block;
    }

JavaScript

$(document).ready(function(){
    function swapImages(){
        var imgOld = $('#imgOld');
        var imgNew = $('#imgNew');
        var imgShow = imgOld.hasClass('active') ? imgNew : imgOld;
        var imgHide = imgOld.hasClass('active') ? imgOld : imgNew;
        imgHide.fadeOut("fast")
        imgHide.removeClass('active')
        imgShow.fadeIn("fast").addClass('active');
    }
 }

    $('#switch').click(swapImages);

});