JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<img id="myImg" width="200" height="200" src="http://habrastorage.org/getpro/toster/avatars/f9c/72b/ac6/f9c72bac61fff7b377686685d4831255.jpg" data-newsrc="http://www.gravatar.com/avatar/6cba3207532ddbe1c4c83f56d11b8de3?d=wavatar&s=200"/>
</div>

CSS

div{
  text-align:center;
  width:200px;
}

JavaScript

$('#myImg').click(function(){
var src = this.src;
var $self = $(this)
	$self
  	.animate({width:0},function(){
    	$self
      	.attr('src',$(this).data('newsrc'))
    		.data('newsrc',src)
    })    
    .animate({width:'100%'});
})