JSFiddle - React, Tailwind, and code Playground

HTML

<div id="date_1">
    Hover
    <br />
    <img id="img1" src="http://www.fireworkszone.com/tuts/635/filmcountdown_1.gif" />
    <img id="img2" src="http://www.gifs-paradise.com/animated_gifs/counter/animated-gifs-counter-015.gif" />
</div>

CSS

#img1, #img2{
 display:none;   
}

JavaScript

var image1 = new Image();
image1.src = "http://www.fireworkszone.com/tuts/635/filmcountdown_1.gif";
var image2 = new Image();
image2.src = "http://www.gifs-paradise.com/animated_gifs/counter/animated-gifs-counter-015.gif";


$("#date_1").hover(function () {
  
  $("#img1").show().attr('src', image1.src);
  $("#img2").delay(2000).show(true).attr('src', image2.src);
}, function(){
    $("#img1").hide();
    $("#img2").hide();

});