Jquery effect does not work as expected

Question

I created a div that when clicking with the mouse on top, its background is filled by a certain color.

There are several div’s that act this way, aligned side by side.

The id’s of these divs are named increasingly, so if I have 4 div’s for example I will have the id div’s (C0,C1,C2,C3).

If I click on the C2 div for example, all div’s that are before it need to receive the filled background effect.

So far so good!

$('.circulo').click(function() {

  this.style.backgroundColor = '#0099ff';

});

$('#fase-range li').click(function() {

  var id = $(this).attr('id');

  var num = id.split('');

  num = num[1];

  for (i = 0; i < num; i++) {

    var newId = 'c' + i;

    $('#' + newId).css('background-color', '#0099ff');
    //alert(newId);
  }

});

.fase-range {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.fase-range li {
  display: inline-block;
  margin-right: -0.1%;
}

.lilinha {
  width: 2%;
}

.licirculo {
  width: 1.1%;
  top: 50%;
  transform: translateY(50%);
  margin-left: -0.25%;
}

.ambiente {
  margin-left: 5%;
  width: 90%;
  margin-top: 10%;
  padding: 1%;
}

.circulo {
  border: 1px solid #3366ff;
  width: 100%;
  border-radius: 100%;
  height: 20px;
  cursor: pointer;
  transition: 3s;
}

.linha {
  border-top: 1px solid #3366ff;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='ambiente'>
  <ul class='fase-range' id='fase-range'>
    <li class='licirculo' id='c0'>
      <div class='circulo'></div>
    </li>
    <li class='lilinha' id='l0'>
      <div class='linha'></div>
    </li>
    <li class='licirculo' id='c1'>
      <div class='circulo'></div>
    </li>
    <li class='lilinha' id='l1'>
      <div class='linha'></div>
    </li>
    <li class='licirculo' id='c2'>
      <div class='circulo'></div>
    </li>
    <li class='lilinha' id='l2'>
      <div class='linha'></div>
    </li>
    <li class='licirculo' id='c3'>
      <div class='circulo'></div>
    </li>
  </ul>
</div>

However when I click on some div, the other div’s that get the effect seem to ignore Transition, and the border-Radius applied to them.

• How can I make sure that doesn’t happen?
  
• You would have to apply these effects directly by Jquery?
  
• Why css loses the priority of setting effects?

Answer 1

This is because you are applying the effect on the father, and not on. circle, try using this way stating that who will receive the parameter, is the child.

$('.circulo').click(function() {
    this.style.backgroundColor = '#0099ff';
});

$('#fase-range li').click(function() {
    var id = $(this).attr('id');
    var num = id.split('');
    num = num[1];
    for (i = 0; i < num; i++) {
    var newId = 'c' + i;
        $('#' + newId + ' .circulo').css('background-color', '#0099ff');
        //alert(newId);
    }
});