I am trying to make an infinite loop using jquery so the bars will

Question

0

Editorial Team

Asked: June 12, 20262026-06-12T00:24:02+00:00 2026-06-12T00:24:02+00:00

I am trying to make an infinite loop using jquery so the bars will

0

I am trying to make an infinite loop using jquery so the bars will never stop animating unless this line is executed:

$(“.onoffswitch-active”).click(function(){

I tried looping through the “span” tags but it just works for a short while, how can I make it loop infinitely till the user clicks on “onoffswitch-active”, thanks.

The jquery code:

var t= Math.random() * 500

$(document).ready(function(){
  $(".onoffswitch-inactive").click(function(){
   $('span').each(function(x){
    $("#bar1").animate({height:Math.random() * 300},"t");
    $("#bar2").animate({height:Math.random() * 300},"t");
    $("#bar3").animate({height:Math.random() * 300},"t");
    $("#bar4").animate({height:Math.random() * 300},"t");
    $("#bar5").animate({height:Math.random() * 300},"t");
    $("#bar6").animate({height:Math.random() * 300},"t");
    $("#bar7").animate({height:Math.random() * 300},"t");
    $("#bar8").animate({height:Math.random() * 300},"t");
    $("#bar9").animate({height:Math.random() * 300},"t");
    $("#bar10").animate({height:Math.random() * 300},"t");
    $("#bar11").animate({height:Math.random() * 300},"t");
    $("#bar12").animate({height:Math.random() * 300},"t");
    $("#bar13").animate({height:Math.random() * 300},"t");
    $("#bar14").animate({height:Math.random() * 300},"t");
    $("#bar15").animate({height:Math.random() * 300},"t");
    $("#bar16").animate({height:Math.random() * 300},"t");
    $("#bar17").animate({height:Math.random() * 300},"t");
    $("#bar18").animate({height:Math.random() * 300},"t");
    $("#bar19").animate({height:Math.random() * 300},"t");
    $("#bar20").animate({height:Math.random() * 300},"t");
    $("#bar21").animate({height:Math.random() * 300},"t");
    $("#bar22").animate({height:Math.random() * 300},"t");
    $("#bar23").animate({height:Math.random() * 300},"t");
    $("#bar24").animate({height:Math.random() * 300},"t");
    $("#bar25").animate({height:Math.random() * 300},"t");
    $("#bar26").animate({height:Math.random() * 300},"t");
    $("#bar27").animate({height:Math.random() * 300},"t");
    $("#bar28").animate({height:Math.random() * 300},"t");
    $("#bar29").animate({height:Math.random() * 300},"t");
    $("#bar30").animate({height:Math.random() * 300},"t");
    $("#bar31").animate({height:Math.random() * 300},"t");
    $("#bar32").animate({height:Math.random() * 300},"t");
    $("#bar33").animate({height:Math.random() * 300},"t");
    $("#bar34").animate({height:Math.random() * 300},"t");
    $("#bar35").animate({height:Math.random() * 300},"t");
    $("#bar36").animate({height:Math.random() * 300},"t");
    $("#bar37").animate({height:Math.random() * 300},"t");
    $("#bar38").animate({height:Math.random() * 300},"t");
    $("#bar39").animate({height:Math.random() * 300},"t");
    $("#bar40").animate({height:Math.random() * 300},"t");
    $("#bar41").animate({height:Math.random() * 300},"t");
    $("#bar42").animate({height:Math.random() * 300},"t");
    $("#bar43").animate({height:Math.random() * 300},"t");
    $("#bar44").animate({height:Math.random() * 300},"t");
    $("#bar45").animate({height:Math.random() * 300},"t");
    $("#bar46").animate({height:Math.random() * 300},"t");
    $("#bar47").animate({height:Math.random() * 300},"t");
    $("#bar48").animate({height:Math.random() * 300},"t");
    $("#bar49").animate({height:Math.random() * 300},"t");
    $("#bar50").animate({height:Math.random() * 300},"t");
    $("#bar51").animate({height:Math.random() * 300},"t");
    $("#bar52").animate({height:Math.random() * 300},"t");
    $("#bar53").animate({height:Math.random() * 300},"t");
    $("#bar54").animate({height:Math.random() * 300},"t");
    $("#bar55").animate({height:Math.random() * 300},"t");
    $("#bar56").animate({height:Math.random() * 300},"t");
    $("#bar57").animate({height:Math.random() * 300},"t");
    $("#bar58").animate({height:Math.random() * 300},"t");
    $("#bar59").animate({height:Math.random() * 300},"t");
    $("#bar60").animate({height:Math.random() * 300},"t");
   });
  });



  $(".onoffswitch-active").click(function(){
    $(":animated").stop(true,true);
    $("#bar1").animate({height:0},"slow");
    $("#bar2").animate({height:0},"slow");
    $("#bar3").animate({height:0},"slow");
    $("#bar4").animate({height:0},"slow");
    $("#bar5").animate({height:0},"slow");
    $("#bar6").animate({height:0},"slow");
    $("#bar7").animate({height:0},"slow");
    $("#bar8").animate({height:0},"slow");
    $("#bar9").animate({height:0},"slow");
    $("#bar10").animate({height:0},"slow");
    $("#bar11").animate({height:0},"slow");
    $("#bar12").animate({height:0},"slow");
    $("#bar13").animate({height:0},"slow");
    $("#bar14").animate({height:0},"slow");
    $("#bar15").animate({height:0},"slow");
    $("#bar16").animate({height:0},"slow");
    $("#bar17").animate({height:0},"slow");
    $("#bar18").animate({height:0},"slow");
    $("#bar19").animate({height:0},"slow");
    $("#bar20").animate({height:0},"slow");
    $("#bar21").animate({height:0},"slow");
    $("#bar22").animate({height:0},"slow");
    $("#bar23").animate({height:0},"slow");
    $("#bar24").animate({height:0},"slow");
    $("#bar25").animate({height:0},"slow");
    $("#bar26").animate({height:0},"slow");
    $("#bar27").animate({height:0},"slow");
    $("#bar28").animate({height:0},"slow");
    $("#bar29").animate({height:0},"slow");
    $("#bar30").animate({height:0},"slow");
    $("#bar31").animate({height:0},"slow");
    $("#bar32").animate({height:0},"slow");
    $("#bar33").animate({height:0},"slow");
    $("#bar34").animate({height:0},"slow");
    $("#bar35").animate({height:0},"slow");
    $("#bar36").animate({height:0},"slow");
    $("#bar37").animate({height:0},"slow");
    $("#bar38").animate({height:0},"slow");
    $("#bar39").animate({height:0},"slow");
    $("#bar40").animate({height:0},"slow");
    $("#bar41").animate({height:0},"slow");
    $("#bar42").animate({height:0},"slow");
    $("#bar43").animate({height:0},"slow");
    $("#bar44").animate({height:0},"slow");
    $("#bar45").animate({height:0},"slow");
    $("#bar46").animate({height:0},"slow");
    $("#bar47").animate({height:0},"slow");
    $("#bar48").animate({height:0},"slow");
    $("#bar49").animate({height:0},"slow");
    $("#bar50").animate({height:0},"slow");
    $("#bar51").animate({height:0},"slow");
    $("#bar52").animate({height:0},"slow");
    $("#bar53").animate({height:0},"slow");
    $("#bar54").animate({height:0},"slow");
    $("#bar55").animate({height:0},"slow");
    $("#bar56").animate({height:0},"slow");
    $("#bar57").animate({height:0},"slow");
    $("#bar58").animate({height:0},"slow");
    $("#bar59").animate({height:0},"slow");
    $("#bar60").animate({height:0},"slow");


  });
});

The HTML:

<div class="onoffswitch">
    <div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
    <label class="onoffswitch-label" for="myonoffswitch">
    <div class="onoffswitch-inner">
    <div class="onoffswitch-active" onClick="stop();">ON</div>
    <div class="onoffswitch-inactive" onClick="play();">OFF</div>
    </div>

    </label>
    </div> 
</div>


<div class="eq">
    <span id="bar1" class="bar"></span>
    <span id="bar2" class="bar"></span>
    <span id="bar3" class="bar"></span>
    <span id="bar4" class="bar"></span>
    <span id="bar5" class="bar"></span>
    <span id="bar6" class="bar"></span>
    <span id="bar7" class="bar"></span>
    <span id="bar8" class="bar"></span>
    <span id="bar9" class="bar"></span>
    <span id="bar10" class="bar"></span>
    <span id="bar11" class="bar"></span>
    <span id="bar12" class="bar"></span>
    <span id="bar13" class="bar"></span>
    <span id="bar14" class="bar"></span>
    <span id="bar15" class="bar"></span>
    <span id="bar16" class="bar"></span>
    <span id="bar17" class="bar"></span>
    <span id="bar18" class="bar"></span>
    <span id="bar19" class="bar"></span>
    <span id="bar20" class="bar"></span>
    <span id="bar21" class="bar"></span>
    <span id="bar22" class="bar"></span>
    <span id="bar23" class="bar"></span>
    <span id="bar24" class="bar"></span>
    <span id="bar25" class="bar"></span>
    <span id="bar26" class="bar"></span>
    <span id="bar27" class="bar"></span>
    <span id="bar28" class="bar"></span>
    <span id="bar29" class="bar"></span>
    <span id="bar30" class="bar"></span>
    <span id="bar31" class="bar"></span>
    <span id="bar32" class="bar"></span>
    <span id="bar33" class="bar"></span>
    <span id="bar34" class="bar"></span>
    <span id="bar35" class="bar"></span>
    <span id="bar36" class="bar"></span>
    <span id="bar37" class="bar"></span>
    <span id="bar38" class="bar"></span>
    <span id="bar39" class="bar"></span>
    <span id="bar40" class="bar"></span>
    <span id="bar41" class="bar"></span>
    <span id="bar42" class="bar"></span>
    <span id="bar43" class="bar"></span>
    <span id="bar44" class="bar"></span>
    <span id="bar45" class="bar"></span>
    <span id="bar46" class="bar"></span>
    <span id="bar47" class="bar"></span>
    <span id="bar48" class="bar"></span>
    <span id="bar49" class="bar"></span>
    <span id="bar50" class="bar"></span>
    <span id="bar51" class="bar"></span>
    <span id="bar52" class="bar"></span>
    <span id="bar53" class="bar"></span>
    <span id="bar54" class="bar"></span>
    <span id="bar55" class="bar"></span>
    <span id="bar56" class="bar"></span>
    <span id="bar57" class="bar"></span>
    <span id="bar58" class="bar"></span>
    <span id="bar59" class="bar"></span>
    <span id="bar60" class="bar"></span>


</div>

The CSS:

#bar1,#bar2,#bar3,#bar4,#bar5,#bar6,#bar7,#bar8,#bar9,#bar10,#bar11,#bar12,#bar13,#bar14,#bar15,#bar16,#bar17,#bar18,#bar19,#bar20,#bar21,#bar22,#bar23,#bar24,#bar25,#bar26,#bar27,#bar28,#bar29,#bar30,#bar31,#bar32,#bar33,#bar34,#bar35,#bar36,#bar37,#bar38,#bar39,#bar40,#bar41,#bar42,#bar43,#bar44,#bar45,#bar46,#bar47,#bar48,#bar49,#bar50,#bar51,#bar52,#bar53,#bar54,#bar55,#bar56,#bar57,#bar58,#bar59,#bar60,#bar61,#bar62,#bar63,#bar64,#bar65,#bar66,#bar67,#bar68
{
    background-color: white;
    width:20px;
    height:0px;
    display: inline-block;
    vertical-align: bottom;
}

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-12T00:24:03+00:00

As you did not provide your html, I used my own, but maybe the follwing will help you:

var
  duration = Math.random() * 500,
  isAnimating = false;

// start animations
function startAnmation() {
  isAnimating = true;
  $('#wrapper .bar').each(function () {
    (function loop($el) {
      $el.animate({
        height: Math.random() * 300
      }, {
        duration: duration,
        complete: function () {
          if (isAnimating) {
            loop($el);
          }
        }
      });
    }($(this)));
  });
}

// stop animations
function stopAnmation() {
  isAnimating = false;
  $('#wrapper .bar').stop(false);
}

// bind click events
$('#onoffswitch').on({
  click: function() {
    if ($(this).toggleClass('inactive active').is('.active')) {
      startAnmation();
    } else {
      stopAnmation();
    }
  }
});

works with the following html:

<button id="onoffswitch" class="inactive">start/stop</button>
<div id="wrapper">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

and some css:

#wrapper {
  overflow: hidden;
}

.bar {
  float: left;
  width: 20px;
  background: #efefef;
  margin-right: 1px;
}

demo: http://jsfiddle.net/Y2Sjf/1/

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I am trying to make an infinite loop using jquery so the bars will

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply