一个接一个地执行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代码

回答

相关问题