1

この行が実行されない限り、バーがアニメーションを停止しないように、jqueryを使用して無限ループを作成しようとしています。

$（ "。onoffswitch-active"）。click（function（）{

「span」タグをループしてみましたが、しばらくの間は機能します。ユーザーが「onoffswitch-active」をクリックするまで、無限にループさせるにはどうすればよいですか。

jqueryコード：

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");


  });
});

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>

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;
}
4

6 に答える 6

1

あなたがあなたのhtmlを提供しなかったので、私は私自身のものを使いました、しかし多分以下はあなたを助けるでしょう：

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();
    }
  }
});

次の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>​

といくつかのCSS：

#wrapper {
  overflow: hidden;
}

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

デモ： http： //jsfiddle.net/Y2Sjf/1/

于 2012-09-25T14:46:47.437 に答える
1

CSS3を使用してこのアニメーションを実行することもできます。

JS：

$("#toggleButton").click(function(){
    $(this).toggleClass("running");

    var doAnim = function(){
        if ($("#toggleButton").hasClass("running")){
            $("#buttonbar .bar").each(function(){
                $(this).css("height", Math.round(Math.random() * 99 + 1) + "%");
            });
            setTimeout(doAnim, 250);
        }
    };
    doAnim();
});​​​​​​

CSS

#buttonbar .bar{
    width:20px;
    background:#fff;
    margin-right:3px;
    float:left;
    overflow:hidden;

    -webkit-transition:height .25s; /* Note I only included the webkit transition */
}

フィドル： http： //jsfiddle.net/WuFZd/

于 2012-09-25T15:25:56.177 に答える
0

jQuery .each関数は、ループする要素の数が無限でない限り、無限ループを生成するようには機能しません。この場合、純粋なjavascriptからwhileループを作成することで、より適切にサービスを提供できます。

于 2012-09-25T14:21:52.663 に答える
0

.each()それを行う正しい方法ではありません。あなたが使用する必要がありますsetInterval

たとえば、あなたはこのようなことを試みます

$(".onoffswitch-inactive").click(function(){
    setInterval(function(){
          $("#bar1").animate({height:Math.random() * 300},"t");
    }, 300); //run every 300 milliseconds. 
}

そして、を使用して間隔をクリアしますclearInterval

于 2012-09-25T14:22:29.140 に答える
0

あなたのコードは奇妙に思えますが、基本的に要素にクラスを与えて、このようなことをします。

var bars = $(".bars");

function loop() {
    var len = bars.length;
    bars.each(function() {
        $(this).animate({height: Math.floor(Math.random() * 300)}, "slow");
    });
    bars.animate({height: 0}, "slow", function() {
                                          if (!--len) loop();
                                      });
}
loop();
于 2012-09-25T14:24:45.023 に答える
-3

免責事項：クイックハック！

このコードを置き換えます：

$('span').each(function(x){

と：

runAnimation = true;
while(runAnimation) {

そしてこのコード：

$(":animated").stop(true,true);

追加：

$(":animated").stop(true,true);
runAnimation = false;
于 2012-09-25T14:21:40.280 に答える