Executing JavaScript code one after another

I have stack of images arrange one behind another, whenever I click on them current image should flip down, image is flipping down but its parent container is staying at same position. Due to that I am not able to perform action on other images.

I have chosen the option of providing lesser z index value to parent element so that it will not cause problem to perform event on other images, but still it is not working.

I am able to add z index value but when running the code both flipping and adding z index to parent is executing at one time. Due to that animation is not coming in a right way.

I want to know, how I can execute code one after another, example when flipping image is completed then only I want to add z index value to parent element (f1_container) so that it will not cause problem for other images.

Please help.

<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">
                       开发者_Go百科 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);

}

I think this may be helpful: http://gitorious.org/webkit/webkit/blobs/master/LayoutTests/animations/animation-end-event-destroy-renderer.html

I'd start with something like this inside the click event handler and see if that works

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

hope this is helpful