JSFiddle - React, Tailwind, and code Playground
HTML
<img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg"/>
JavaScript
var t;
var i=0;
var images=["http://www.google.com/logos/2011/mothersday11-hp.jpg","http://www.google.com/logos/2011/trevithick11-hp.jpg"];
function changeProducts() {
// Fade out
var $anfBox = $("#image"),
queue = $anfBox.queue('fx');
if (queue && queue.length === 0) {
$anfBox.fadeTo(500,0.30, function() { $anfBox.attr("src",images[(i++)%2]);}).fadeTo(500,1);
}
};
$(document).ready(function() {
// Some pre-animation stuff, like loading the products etc.
// Initialize animation timer
t = setInterval(changeProducts, 3000);
});