Looping each div with same class to change color at a time

Question

I was trying to access multiple span elements that share the same class to change their background color. To illustrate further, given the following :

<div id = "circle-height">
 <span class="circle"></span>
 <span class="circle"></span>
 {multiple lines of span elements with class of "circle"}
</div>

and with CSS style:

.circle{
 display: inline-block;
 width: 20px;
 height: 20px;
 background: blue;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 margin-top:10px;
 margin-left:10px;
 float:left
}

I would like to toggle the first element to orange background then change it back to blue again permanenetly(before it loops again), and do the same for the rest of the elements. The desired output should be seem like there is an orange circle moving across within the div id of "circle-height", and after reaching the last circle, the first circle will toggle from blue to orange and to blue again, and repeat same process over and over again.

I have come out with a simple code with Jquery and JS to solve the problem as below:

var $divs = $(".circle");

function toggleColor(){

setInterval(function first_color(){
  $divs.css('background','blue')
  setTimeout(function changeColor() {
    for(var i = 0; i < $divs.length; i++){
      //do something to each div like
       $(this[i]).css('background','orange')
    }
  },1000)
  },2000
)}

toggleColor() 

However nothing is happening if I try to access each particular element by $this[i] . The console does not return me any error. I wonder what could have gone wrong here?

Answer 1

I assume you're trying to do something like this (run the code snippet) from reading your post but I'm not 100% sure. If you mean something else please clarify.

 var $circles = $('.circle'); var i = 0; setInterval(function () { $circles.removeClass('oj'); $($circles[i]).addClass('oj'); i++; if (i === $circles.length) i = 0; }, 500); 

 .circle{ display: inline-block; width: 20px; height: 20px; background: blue; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; margin-top:10px; margin-left:10px; float:left } .oj { background: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id = "circle-height"> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> </div> 

Answer 2

Change this line

$(this[i]).css('background','orange')

to

 $(divs[i]).css('background','orange')

 var divs = $(".circle"); function toggleColor(){ setInterval(function(){ divs.css('background','blue'); setTimeout(function(){ for(var i = 0; i < divs.length; i++){ //do something to each div like $(divs[i]).css('background','orange') } },1000) },2000); } toggleColor(); 

 .circle{ background-color:blue; height:150px; width:150px; border-radius:50%; } #circle-height{ height:300px; width:300px; border-radius:50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id = "circle-height"> <span class="circle">ggg</span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> </div> 

Answer 3

var $divs = $(".circle");

function toggleColor(){

  // Get rid of function name here
  setInterval(function(){
    $divs.css('background','blue');

    // Get rid of function name here too
    setTimeout(function() {
      for(var i = 0; i < $divs.length; i++){
        // Use $divs instead of "this"
        $($divs[i]).css('background','orange')
      }
    },1000)
  },2000)
}

toggleColor();

Answer 4

You are over complicating things. If you want animate horizontally you can just use CSS3 in the following manner:

 #circle{ position: relative; background-color:blue; height:200px; width:200px; border-radius:50%; margin: auto; overflow: hidden; } #innerCircle { position: absolute; top: 50%; display: block; height:20px; width:20px; margin-top: -10px; background: orange; border-radius:50%; animation: translateX 2s ease-in infinite; } @keyframes translateX { from {left: -20px;} to {left: 200px;} } 

 <div id="circle"> <span id="innerCircle"></span> </div> 

Hopefully this helps