jQuery addClass example

Change class name on click in jQuery

by oscard

HTML

<div id="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

SCSS

#wrapper{
  display: flex;

   div{
     width:10px;
     height:10px;
     margin: 5px;
     border-radius: 5px;
     background: red;
     //animation-timing-function: cubic-bezier(0, 1, 1, 0);
     box-shadow: 0 0 17px 6px rgba(255, 0, 24, 0.6);
     //animation: blinka 1.2s infinite;
     
   }
   
   /*@keyframes blinka {
    0%   {opacity:0;}
    50%  {opacity:1;}
    100% {opacity:0;}
  }*/
   
}

JavaScript

var wrapper = $('#wrapper');
var divs = $('#wrapper div');


var i = 0;
var j = 8;

setInterval(function(){
  
  if(i >= 8){
  	//divs.eq(j).css({'width':'10px','height':'10px','margin':'10px'});  
  	divs.eq(j).css({'opacity':0});  
    j--;
    if(j === 0){
    	i = 0;
      j = 8;
    }
  }
  else {
  	//divs.eq(i).css({'width':'5px','height':'5px','margin':'10px'}); 
  	divs.eq(i).css({'opacity':1});  
  }
  i++;
  
},150);