DivAnimation

by Jose Montero

HTML

<div>

</div>

CSS

div{
  border: solid black 1px;
  width: 75px;
  height: 75px;
  background-color: green;
}
.greenFlag{
  background-color: green;
}
.greenFlag{
  background-color: green;
}
.yellowFlag{
  background-color: yellow;
}
.redFlag{
  background-color: red;
}

JavaScript

var Process = (function(){

	return {
  	
    
    init : function()
    {
    		//$('div').addClass('greenFlag');
        setTimeout( () => { this.fading(this.changeToYellow);}, 5000)
        setTimeout( () => { this.fading(this.changeToRed);}, 15000)
    },
    fading : function(callback){
    	$("div").fadeOut(5000, "linear", callback);
    },
    changeToYellow : function()
    {
    	$('div').addClass('yellowFlag');
      $("div").fadeIn(5000);
    },
    changeToRed : function()
    {
    
    	$('div').addClass('redFlag');
      $("div").fadeIn(5000);
    }
  
  
  };

})();

$(document).ready(function(){
	Process.init();
});