Search code examples
jqueryhtmlcsswindow

promise().done() method is not waiting until my animate.css effect has finished

Here is the jsfiddle.

As you can see, I'm trying to open google.com in the same window AFTER the big red ball has finished fading in from right. Instead, google.com opens about a second after the fade in from right starts. How do I get my window.location function to wait until the fade in completely finishes?

Yes, I have JQuery 1.6.2 linked to my page.

Markup: 

    <a href="http://www.google.com"><img class="animated fadeInRightBig" src="http://www.clipartsfree.net/vector/large/roystonlodge_Simple_Glossy_Circle_Button_Red_Vector_Clipart.png" style="">
     </a>
</body>

JQuery:

$('.animated').promise().done(function(){
window.location = "http://www.google.com";
});

Vincent: I tried the following, but it didn't work. Any ideas? 

$('.animated fadeInRightBig').on('transitionend webkitTransitionEnd oTransitionEnd     otransitionend', function() {
window.location = 'http://www.google.com';
});
Solution

  • Here's an easier way using meta tags:

    <meta http-equiv="refresh" content="6; url=https://www.google.com/">
<meta name="keywords" content="automatic redirection">