Style Event

by Luis Valle

HTML

<div class="name" style="width:40px;height:40px;background-color:yellow;"></div>
<button id="btnChangeBackgroundColor">
Change Background-color
</button>

<div>
  <span id="lblChanged"></span>
</div>

CSS

#lblChanged {
  color: red;
}

JavaScript

$(document).ready(function () {
	var colorsArr = ['red', 'orange', 'gray', 'black', 'blue', 'yellow'];
	$('#btnChangeBackgroundColor').on('click', function () {
  	var xColor = colorsArr.shift();
    colorsArr.push(xColor);
    
    $('.name').css('background-color', xColor);
  });

	$('.name').attr('data-originalstyle', $('.name').attr('style'));
  
  checkIfStyleChanged();
});

function checkIfStyleChanged() {
	if ($('.name').attr('data-originalstyle') != $('.name').attr('style')) {
   $('.name').attr('data-originalstyle', $('.name').attr('style'));
  
  	$('#lblChanged').html('The Style Changed');
    $('#lblChanged').css('display', '');
    
    setTimeout(function () {
    	$('#lblChanged').fadeOut('slow');
    }, 1500);    
  }
  
  setTimeout(function () {
    	checkIfStyleChanged();
    }, 50); 
}