我正在尝试使用jquery进行无限循环,因此除非执行此行,否则条形图将永远不会停止动画:
$( “onoffswitch活性”)。单击(函数(){
我尝试循环遍历“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;
}
答案 0 :(得分:1)
由于你没有提供你的html,我使用了自己的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;
}
答案 1 :(得分: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 */
}
答案 2 :(得分:0)
jQuery .each函数不会产生无限循环,除非你有无数个要循环的元素。在这种情况下,通过使用纯javascript创建while循环可以更好地服务。
答案 3 :(得分:0)
.each()
不是正确的方法。您需要使用setInterval
例如,你尝试这样的事情
$(".onoffswitch-inactive").click(function(){
setInterval(function(){
$("#bar1").animate({height:Math.random() * 300},"t");
}, 300); //run every 300 milliseconds.
}
使用clearInterval
答案 4 :(得分: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();
答案 5 :(得分:-3)
免责声明:快速入侵!
替换此代码:
$('span').each(function(x){
使用:
runAnimation = true;
while(runAnimation) {
和这段代码:
$(":animated").stop(true,true);
添加:
$(":animated").stop(true,true);
runAnimation = false;