一個接一個地執行javascript代碼

我有一堆圖像排列在另一個之後，當我點擊它們時，當前圖像應該向下翻轉，圖像正在翻轉，但其父容器停留在相同位置。由於我不能對其他圖像執行操作。一個接一個地執行javascript代碼

我選擇了向父元素提供較小的z索引值的選項，以便它不會導致問題在其他圖像上執行事件。但它仍然不起作用。

我能夠添加z索引值，但是在運行代碼時，同時翻轉和向父項添加z索引正在執行。由於該動畫不是以正確的方式進行的。

我想知道，如何我可以一個接一個地執行代碼，例如當翻轉圖像完成後，只有我想添加z索引值到父元素（f1_container），以便它不會導致其他圖像的問題。

請幫

<div id="f1_container" class="f1_container"> 
    <div id="f1_card" class="shadow"> 
     <div class="front face"> 
      image goes here 

     </div> 
     <div class="back face center"> 
         image goes here 

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


var flipImage=document.querySelectorAll('.shadow');  
for(j=0; j<flipImage.length; j++){ 
var currentFlipImage=flipImage[j]; 
currentFlipImage.addEventListener('click', function(event){ 

var currentElement=event.currentTarget; 
//this should be executed first 
currentElement.style.webkitTransform='rotateX(-120deg)'; 
and this one should execute after flipping is completely done 
this.parentNode.style.zIndex=-100; 
},false); 

}

來源

2010-12-04 Faiyaz

我想這可能是有益的： http://gitorious.org/webkit/webkit/blobs/master/LayoutTests/animations/animation-end-event-destroy-renderer.html

我會用這樣的單擊事件處理程序內啓動並看看是否能工程

var parentNode = this.parentNode; 
currentElement.addEventListener('webkitAnimationEnd', function() { 
    parentNode.style.zIndex=-100; 
});

希望這有幫助

來源

2010-12-04 16:15:07

非常感謝您提供我這個建議，我從中學到很多東西。但是，這不適用於我的代碼。我嘗試了另一種工作正常的方式。我應用setTimeout函數並在經過一定時間後執行所需的代碼:) var parentNode = this.parentNode; var addIndex = setInterval（function（）{parentNode.style.zIndex = -100;}，300）; – Faiyaz 2010-12-04 18:14:16

一個接一個地執行javascript代碼

回答

相關問題