JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    <h2>jQuery</h2>
    <a href="/" class="js"></a>
    <h2>CSS</h2>
    <a href="/" class="css"></a>
</div>

CSS

#test {
    text-align:center;
}
a {
	display:inline-block;
	width:128px;
	height:128px;
	margin-bottom:20px;
	background:url(http://cdn4.iconfinder.com/data/icons/colorful/128/blue-29.png);
}
.css {
	-webkit-transition:all 22.4s linear;
	-moz-transition:all .4s linear;
	-o-transition:all .4s linear;
	-ms-transition:all .4s linear;
	transition:all 22.4s linear;
}
.changed, .css:hover {
	background:url(http://cdn4.iconfinder.com/data/icons/colorful/128/blue-05.png);
}

JavaScript

function fade(a,b,c){
	a.fadeOut(c, function(){
		a.fadeIn(c).toggleClass(b);
	});
}

$('.js').on('mouseenter mouseleave', function(){
	fade($(this), 'changed', 300);
});