更好的方法来延迟javascript中的函数？

Question

I am trying to find out a better way to delay myFunction.As you see i animated this image to fade in and when i click on it i trigger a new animation such as slideleft and at the end of this animaton i call myFunctionContinued delayed about 5 sec until my animaton is completed and link is opened.I dont think is a clever way to do that and i would like your suggestions!

All code is here jsfidle

HTML just a div with id and class fadein

<div id="object4" class="fadeIn">
 <a id="myLink" href="#" onclick="myFunction();return false;"><img class="img4" src="http://imageshack.com/a/img89/1871/deqz.png"></a></div>

CSS and keyframes fadein and slideleft

<style> 

body{

background-color:black;

width:800px;
}

img.img4{
width: 300px; height: 200px;
transform:translate(550px,150px);

}

/*
==============================================
fadeIn
==============================================
*/

.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        transform: scale(1.1);  
    }
    80% {
        transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        transform: scale(1);
        opacity: 1; 
    }       
}



/*
==============================================
slideLeft
==============================================
*/


.slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;  

    animation-fill-mode: forwards;
    animation-duration: 4s; 
    -webkit-animation-duration: 4s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideLeft {
    0% {
        transform: translateX(40%);
    }
    90% {
        transform: translateX(-3%);
    }

    100% {
        transform: rotate(-130deg) translate(-430px,60px);
    }
    /*from {transform: translateX(40%);}
    to {transform: translateX(-3%);}*/
}

</style>

Function click on object4 trigger animation slideleft wait 5 sec call continuedfunction and open the link in the same window

<script>

function myFunction()
{
$('#object4').click(function() {
        $(this).addClass("slideLeft");


    });

setTimeout(myFunctionContinued, 5000);

}

function myFunctionContinued(){

window.open("http://www.w3schools.com",'_self',false);}

</script>

Keyframes style photo isnt the final result of my animation that i want to focus is the way as i said to delay.

Thanks for your time!

Answer 1

There's an event which fires when a CSS3 animation completes (from: http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

object4.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
function(e) {

// code to execute after transition ends

});