Выполнение javascript-кода один за другим

Question

У меня есть стопка изображений, расположенных одна за другой, когда я нажимаю на них, текущее изображение должно переворачиваться, изображение переворачивается, но его родительский контейнер остается в том же положении. Из-за этого я не могу выполнять действия на других изображениях.

Я выбрал вариант предоставления меньшего значения индекса 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); 

} 

Answer 1

Я думаю, что это может быть полезно: 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; 
}); 

надеюсь, что это полезно