Vinoth Narayan Vinoth Narayan - 2 months ago 24
CSS Question

delay the setInterval using jquery

HTML:-

<ul style="list-style:none;color:white;font-size:22px;">
<li style="margin: 0px 0 40px 0;"> </li>
<li class="cbx-fadeInLeft-1" style="margin: 0 0 18px 0;"> XXX</li>
<li class="cbx-fadeInLeft-2" style="margin: 0 0 15px 0;"> YYY </li>
<li class="cbx-fadeInLeft-3" style="margin: 0 0 15px 0;"> ZZZ</li>
</ul>


Jquery:-

setInterval(function () {
for (i = 1; i < 4; i++) {
$('.cbx-fadeInLeft-' + i + '').toggleClass('active');// this will run after every 5 seconds
}
//setTimeout(setInterval, 3000);
}, 5000);


css:-

.cbx-fadeInLeft-1.active{
color:#3498db;
}

.cbx-fadeInRight-2.active
{
color:#3498db;
}
.cbx-fadeInLeft-3.active
{
color:#3498db;
}


In the above code i wanna to delay the code for some time n then start the for loop again..TO give the li in style..

I just Want one by one to highlight....

Answer

You can move the variable i outside the scope of setInterval, then to make it cyclic you just need to set the appropriate value.

var i = 1;
setInterval(function() {
  $('.cbx-fadeInLeft-' + i + '').toggleClass('active');
  i++;
  if (i == 4) {
    i = 1;
  }
}, 1000);
.cbx-fadeInLeft-1.active {
  color: #3498db;
}
.cbx-fadeInLeft-2.active {
  color: #3498db;
}
.cbx-fadeInLeft-3.active {
  color: #3498db;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style="list-style:none;color:white;font-size:22px;">
  <li style="margin: 0px 0 40px 0;"></li>
  <li class="cbx cbx-fadeInLeft-1" style="margin: 0 0 18px 0;">XXX</li>
  <li class="cbx cbx-fadeInLeft-2" style="margin: 0 0 15px 0;">YYY</li>
  <li class="cbx cbx-fadeInLeft-3" style="margin: 0 0 15px 0;">ZZZ</li>
</ul>

Comments