プレーンJavaScriptを使用して複数のdivをループでアニメーション化する

私のウェブページには青い四角形が3つあります。各スクエアのサイズは50 x 50ピクセルです。私はゆっくりと各正方形のサイズを80pxずつ80pxずつ増やしたいと考えています。上記の予想された結果の代わりに、最後の正方形のサイズのみが変更されました。プレーンJavaScriptを使用して複数のdivをループでアニメーション化する

以下のコードをどのように動作させるにはどうすればよいですか。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>zoom box</title> 
 
    <script> 
 
    function zoom() { 
 
     var box; 
 
     const height = 50; 
 
     var boxes = document.getElementsByClassName('box'); 
 
     var id; 
 
     for (i = 0; i < boxes.length; i++) { 
 
     box = boxes[i]; 
 
     h = height; 
 
     frame(); 
 
     } 
 

 
     function frame() { 
 
     h++; 
 
     if (h >= 80) { 
 
      return; 
 
     } 
 

 
     box.style.height = h + 'px'; 
 
     box.style.width = h + 'px'; 
 

 
     setTimeout(frame, 100); 
 

 
     } 
 
    } 
 
    </script> 
 

 
    <head> 
 

 
    <body width="100%" height="100%" onload="zoom()"> 
 
     <div style="width: 20em; height: 20em; margin:auto; border-style:solid;display:flex; justify-content: space-between;"> 
 

 
     <div class="box" style="background-color: blue; width:50px; height: 50px; margin:auto"> 
 

 
     </div> 
 

 
     <div class="box" style="background-color: blue; width:50px; height: 50px; margin:auto"> 
 

 
     </div> 
 

 
     <div class="box" style="background-color: blue; width:50px; height: 50px; margin:auto"> 
 

 
     </div> 
 
     </div> 
 
    </body> 
 

 
</html>

出典

2016-12-22 Bam Kay Jr

フレーム（）関数にボックスオブジェクトを渡します。 –

function zoom() { 
     var box; 
     const height = 50; 
     var boxes = document.getElementsByClassName('box'); 
     var array = []; 
     var id; 
     for (var i = 0; i < boxes.length; i++) { 
     box = boxes[i]; 
     console.log(box) 
     h = height; 
     if(i == 0){ 
      array[i] = true; 
     }else{ 
      array[i] = false; 
     } 
     frame(box,i,height); 
    } 

     function frame(box,i,h) { 


     if (h >= 80) { 
      for(var j = 0; j < array.length ; j++){ 
      if(j != i && array[j] == false){ 
       array[j] = true; 
       break; 
      } 
      } 
      array[i] = true; 
      return box; 
     } 
     console.log(i + " " + array[i]); 
     if(array[i]){ 
      h++; 
      box.style.height = h + 'px'; 
      box.style.width = h + 'px'; 
     } 

     setTimeout(function(){ 
      frame(box,i,h); 
     }, 100); 

     } 
    }

出典

2016-12-22 17:17:53

ソリューションをありがとう。一度にすべてのボックスサイズが変更されました。最初のボックスが最初にズームし、次に2番目のもの、次に3番目のものが続きます。もう一度ありがとう –

私は現在コードを変更しました –

ありがとうございます。私は本当に感謝します –

プレーンJavaScriptを使用して複数のdivをループでアニメーション化する

答えて

関連する問題