JSFiddle - React, Tailwind, and code Playground
HTML
<div class="image"><div class="change me">Item 1</div></div>
<div class="image"><div class="change me">Item 2</div></div>
<div class="image"><div class="change me">Item 3</div></div>
<div class="image"><div class="change me">Item 4</div></div>
<div class="image"><div class="change me">Item 5</div></div>
<div class="image"><div class="change me">Item 6</div></div>
<div class="image"><div class="change me">Item 7</div></div>
CSS
body {
font-family: Helvetica, Arial, sans-serif;
font-size:20px;
}
.image {
background-color: #fff;
display: block;
border-bottom: 1px solid #ccc;
background-image: url(http://cdn.sstatic.net/Img/mini-hero-bg.png?v=7f269bbbdb22);
}
.change {
background-color: #fff;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
JavaScript
var divs = $(".me").toArray();
var divlength = divs.length;
var randomnum,lastnum,randomfirstdiv;
lastnum = 0;
$(document).ready(function(){
randomnum = Math.floor(Math.random()*(divlength-1));
randomfirstdiv = divs[randomnum];
$(randomfirstdiv).removeClass("change", 1000);
});
setInterval(function(){
if(randomfirstdiv){
$(randomfirstdiv).addClass("change", 1000);
randomfirstdiv = null;
}
randomnum = Math.floor(Math.random()*(divlength-1));
console.log("Chosen number is "+randomnum);
if(randomnum == lastnum){
console.log("We have a duplicate ("+randomnum+")");
if( (randomnum-1) >= 0 ){
randomnum = (randomnum-1);
console.log("Duplicate solved, it is now "+randomnum);
}else if( (randomnum+1) <= (divlength) ){
randomnum = (randomnum+1);
console.log("Duplicate solved, it is now "+randomnum);
}
}
lastnum = randomnum;
var randomdiv = divs[randomnum];
$(randomdiv).addTemporaryClass("change", 2000);
}, 2000);
$.fn.extend({
addTemporaryClass: function(className, duration) {
var elements = this;
clearTimeout(doChange);
var doChange = setTimeout(function() {
elements.addClass(className, duration);
}, duration);
return this.each(function() {
$(this).removeClass(className, duration);
});
}
});