如何在while循環中動畫

我想用while循環一個接一個地動畫每個DIV。但有我正面臨一個問題。 while循環變量生成系列的數量，因爲我可以在alert框中獲得該值。但是，當我在.eq（）函數中使用while循環遞增變量時，它並不像增量動畫Div一樣。如何在while循環中動畫

..Jitu

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

 
\t BoxAnimate(); 
 
});

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

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

來源

2015-11-18 jitu jahagirdar

DIV與1沒有動畫。這是你面臨的問題嗎？最好嘗試用0初始化計數器。 – Nachiketha

您不需要爲此使用任何類型的循環 - 請參閱我的答案！ :) – Bill

試試這個（也做了工作小提琴這裏http://jsfiddle.net/hqm4bavw/2/）：

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

 
\t BoxAnimate(); 
 
});

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

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

UPDATE：

的.stop（）方法的實用性是顯而易見的，當我們需要動畫上的mouseenter和鼠標離開的元素。你的情況不是強制性的。關於延遲方法，在這裏您將每個循環的延遲時間乘以與您的計數。所以你將有1000 * 1，1000 * 2，1000 * 3。每個動畫之間會有1秒鐘的時間。

你可以找到更多關於這些方法here和here。

來源

2015-11-18 11:17:18 Ionut

這個是完美的！！但你能解釋一下這段代碼（.stop（true，true）.delay（1000 * count））。擴展我的知識..！ –

@jitujahagirdar，我爲我的回答添加了一個解釋。 – Ionut

jQuery中eq()是基於對var count= 0;

來源

2015-11-18 11:19:04 Ramanlfc

0變化var count= 1;除非有你沒有提到的東西，你不需要使用while循環的。由於每個箱子具有相同的類，jQuery將針對所有的人在同一時間：

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

 
\t BoxAnimate(); 
 
});

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

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

來源

2015-11-18 11:24:33 Bill

更好的清潔方法將使用each api of jquery而不是while循環。

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

 
});

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

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

來源

2015-11-18 11:26:14 Nachiketha

但它並沒有一個一個地移動。它同時選擇所有的「動畫」div –

如何在while循環中動畫

回答

相關問題