JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imageSliding">
    <img src="https://www.google.co.in/images/srpr/logo4w.png" style="height:100px;width:300px;"
    id="googleLogo" />
    <img src="http://english.samaylive.com/pics/article/yahoo645_1336970261.jpg"
    style="height:100px;width:300px;" id="yahooLogo" />
</div>
<input id="btnSlide" type="button" value="Click to slide..." />

CSS

#yahooLogo {
    display:none;
}

JavaScript

var clickType = 0;
$("#btnSlide").click(function () {
    if (clickType == 0) {
        $("#googleLogo").hide("slide", {
            direction: "right"
        }, 500 );
        $("#yahooLogo").show("slide", {
            direction: "left"
        }, 500 );
        clickType = 1;
    } else if (clickType == 1) {
        $("#yahooLogo").hide("slide", {
            direction: "right"
        }, 500 );
        $("#googleLogo").show("slide", {
            direction: "left"
        }, 500 );
        clickType = 0;
    }
});