如何在while循环中制作动画

Question

我正在尝试使用while循环逐个动画每个DIV。但 我面临着一个问题。 while循环变量生成系列的数量，因为我可以在警告框中得到它。但是当我在.eq（）函数中使用while循环增量变量时，它不能作为增量动画Div逐个动画。

..激凸

＆＃13;

＆＃13;

$(document).ready(function(){
	function BoxAnimate(){
	var count= 1;
		while( count < 9){
			//alert(count);
			$(".animation").eq(count).animate({
			left:"500px"
			});
			count++;
		}
	}

	BoxAnimate();
});

＆＃13;

.animation { background:red; 
		margin-bottom:10px;
		margin-left:30px;
		height:150px; 
		width:150px;
		font-family:Arial;
		font-size:30px;
		text-align:center;
		color:#fff;
		line-height:150px;
		position:relative;
		clear:both;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ani-wrp">
	    <div class="animation"> 1 </div>
		<div class="animation"> 2 </div>
		<div class="animation"> 3 </div>
		<div class="animation"> 4 </div>
		<div class="animation"> 5 </div>
		<div class="animation"> 6 </div>
		<div class="animation"> 7 </div>
		<div class="animation"> 8 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个（这里也是一个工作小提琴http://jsfiddle.net/hqm4bavw/2/）：

＆＃13;

＆＃13;

$(document).ready(function(){
	function BoxAnimate(){
	var count= 0;
		while( count < 9){
			//alert(count);
			$(".animation").eq(count).stop(true, true).delay(1000*count).animate({
				left:"500px"
			});
			count++;
		}
	}

	BoxAnimate();
});

＆＃13;

.animation { background:red; 
		margin-bottom:10px;
		margin-left:30px;
		height:150px; 
		width:150px;
		font-family:Arial;
		font-size:30px;
		text-align:center;
		color:#fff;
		line-height:150px;
		position:relative;
		clear:both;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ani-wrp">
	    <div class="animation"> 1 </div>
		<div class="animation"> 2 </div>
		<div class="animation"> 3 </div>
		<div class="animation"> 4 </div>
		<div class="animation"> 5 </div>
		<div class="animation"> 6 </div>
		<div class="animation"> 7 </div>
		<div class="animation"> 8 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

<强>更新

  

当我们需要时，.stop（）方法的用处是显而易见的   在mouseenter和mouseleave上为元素设置动画。在你的情况下不是   强制性的。关于延迟方法，这里你乘以时间   每次循环延迟计数。所以你将有1000 * 1,1000 * 2,1000 * 3。每个动画之间会有1秒钟。

您可以找到有关这些方法的更多信息here和here。

Answer 2

jquery中的

eq()是基于0的更改var count= 1;到var count= 0;

Answer 3

除非你没有提到某些内容，否则你根本不需要使用while循环。由于每个框都有相同的类，jQuery将同时针对所有这些类：

＆＃13;

＆＃13;

$(document).ready(function(){
	function BoxAnimate(){
	    $(".animation").animate({
			left:"500px"
		});
	}

	BoxAnimate();
});

＆＃13;

.animation { background:red; 
		margin-bottom:10px;
		margin-left:30px;
		height:150px; 
		width:150px;
		font-family:Arial;
		font-size:30px;
		text-align:center;
		color:#fff;
		line-height:150px;
		position:relative;
		clear:both;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ani-wrp">
	    <div class="animation"> 1 </div>
		<div class="animation"> 2 </div>
		<div class="animation"> 3 </div>
		<div class="animation"> 4 </div>
		<div class="animation"> 5 </div>
		<div class="animation"> 6 </div>
		<div class="animation"> 7 </div>
		<div class="animation"> 8 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

更好更干净的方法是使用each api of jquery而不是while循环。

＆＃13;

＆＃13;

$(document).ready(function(){
    $(".animation").each(function(){
         $(this).animate({
	     left:"500px"
	 });
    });

});

＆＃13;

.animation { background:red; 
		margin-bottom:10px;
		margin-left:30px;
		height:150px; 
		width:150px;
		font-family:Arial;
		font-size:30px;
		text-align:center;
		color:#fff;
		line-height:150px;
		position:relative;
		clear:both;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ani-wrp">
	    <div class="animation"> 1 </div>
		<div class="animation"> 2 </div>
		<div class="animation"> 3 </div>
		<div class="animation"> 4 </div>
		<div class="animation"> 5 </div>
		<div class="animation"> 6 </div>
		<div class="animation"> 7 </div>
		<div class="animation"> 8 </div>
</div>

＆＃13;

＆＃13;

＆＃13;