Blink Notification

by Aldi Unanto

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="blink">
 <p>Your notification message</p>
 </div>

CSS

.blink {
     background: none repeat scroll 0 0 rgb(255, 255, 255);
     border: 1px solid rgb(52,152,219);
     color: rgb(52,152,219);
     border-radius: 1em 1em 1em 1em;
     width: 300px;
}

JavaScript

$(function(){
	$('.blink').each(function() {
    var elem = $(this);
    setInterval(function() {
      if (elem.css('background-color') == 'rgb(255, 255, 255)') {
        elem.css({
        	'background-color': 'rgb(52, 152, 219)',
          'color': 'rgb(255, 255, 255)'
        });
      } else {
        elem.css({
        	'background-color': 'rgb(255, 255, 255)',
          'color': 'rgb(52, 152, 219)'
        });
      }
    }, 500);
  });
});