Simon Game，Javascript settimeout和動畫

-1

任何人都可以幫助我模擬四個div標籤的動畫嗎？ Simply for循環應等到div標籤的不透明度在1秒內改變。Simon Game，Javascript settimeout和動畫

function animateDiv(ar) { // ar contains div tag indexes. ex:[0,3,2,3,1,0,1,2,3] 
    for (var i = 0; i < ar.length; i++) { 
     var ind = ""; 

     if (ar[i] == 0) ind = ".red"; 
     else if (ar[i] == 1) ind = ".blue"; 
     else if (ar[i] == 2) ind = ".yellow"; 
     else if (ar[i] = 3) ind = ".green"; 
     var ok = false; 
     setTimeout(function() { 
      $(ind).css('opacity', 1); 
      console.log("waiting " + " index: " + i); 
      ok = true; 
     }, 1000); 

     if (ok == true) { 
      $(ind).css('opacity', 0.7); 
      console.log("Done!"); 
     } 

    } 
}

https://jsfiddle.net/z8y2v5u1/

來源

2016-06-27 omurbek

介意給一小段/小提琴？ –

所以期望的行爲是，第一個div在恢復正常之前變得更加不透明1秒，然後下一個div在恢復正常之前變得更加不透明1秒，等等，以及指定的div的順序數組？ – nnnnnn

究竟是@nnnnnn – omurbek

for循環不能等待超時完成，因爲你提供給setTimeout()功能是當前函數後異步運行（以及任何調用當前函數）完成。所以整個循環會在超時發生之前運行。

您需要使用依靠setTimeout()觸發下一次迭代的「僞循環」。像下面的內容將工作：

function animateDivs(ar, cb) { 
 
    var $divs = $(".red,.green,.blue,.yellow"), 
 
    i = 0; 
 

 
    (function next() { 
 
    if (i === ar.length) { 
 
     if (cb) cb(); 
 
    } else { 
 
     var $div = $divs.eq(ar[i]).css('opacity', 1); 
 
     setTimeout(function() { 
 
     $div.css('opacity', 0.7); 
 
     i++; 
 
     next(); 
 
     }, 1000); 
 
    } 
 
    })(); 
 
} 
 
animateDivs([0,3,2,3,1,0,1,2,3], function() { console.log("Finished")});

div { width: 40px; height: 40px; display: inline-block; opacity: 0.7;} 
 
.red { background-color: red;} 
 
.green { background-color: green;} 
 
.blue { background-color: blue;} 
 
.yellow { background-color: yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="red"></div><div class="green"></div> 
 
<br/> 
 
<div class="blue"></div><div class="yellow"></div>

的next()功能改變相應的股利爲1的不透明度，然後使用setTimeout()改變透明度回之前等待一秒鐘，然後再次調用next()爲數組中的下一個索引。

我想你可能會喜歡一些方法來知道什麼時候該動畫已經結束，所以我添加了一個回調參數（cb）到animateDivs()整個陣列已被處理後，將被稱爲 - 在我的例子它所做的一切將日誌記錄到控制檯，但可以使用它來做更有趣的事情。

來源

2016-06-27 23:09:11 nnnnnn

Simon Game，Javascript settimeout和動畫

回答

相關問題