FadeIn FadeOut animation

by Rajesh Dixit

HTML

<div id="content" class="red"></div>

CSS

.red{
  background: red;
}
.blue{
  background:blue;
}
.green{
  background: green;
}
div{
  width: 60px;
  height:60px;
}

JavaScript

var count = 1;
var class_list = ["red", "blue", "green"];
function animateDiv(){
	$("#content").fadeOut(400,updateClass);
}

function updateClass(){
	$("#content").removeClass("red blue green").addClass(class_list[count++ % class_list.length]).fadeIn(400);
}

function initInterval(){
	setInterval(animateDiv, 5000);
}

$(document).ready(function(){
	initInterval();
})