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

Question

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';
});

I don't know for sure, but I assume `deferred` only works with jQuery animations, not css transitions. — Jason P, Jul 30 '13 at 21:11
You want to add a queue function to the 'fx' queue (which is default) on your `.animated` element which does your redirect. that queue function will be automatically called when the transition/animation is finished. — Derek, Jul 30 '13 at 21:15

score 1 · Answer 1 · answered Jul 30 '13 at 21:29

1

Why not use a callback handler like this...

$("#someElement").show('slide', {}, 400, function(){//your code here!});

answered Jul 30 '13 at 21:29

CtrlShiftF11

172
2
10

score 1 · Answer 2 · edited May 23 '17 at 11:48

1

I don't think the promise().done applies to CSS transistions. Try using the transitionEnd event.

This is different across browsers, so you should look at this:

How do I normalize CSS3 Transition functions across browsers?

E.g.

$('.animated').bind('transitionEnd', function() {
    window.location = 'bla';
});

edited May 23 '17 at 11:48

Community

1
1

answered Jul 30 '13 at 21:32

Vincent McNabb

33,327
7
31
53

I realized this later and agree. I tried the transitionEnd with Firefox and from what I read, this should work. Instead, no redirect. – StacyM Jul 30 '13 at 23:33
$('.animated fadeInRightBig').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', function() { window.location = 'http://www.google.com'; }); – StacyM Jul 31 '13 at 02:29
No, not even the quick redirect. – StacyM Jul 31 '13 at 05:54
Got this from a friend and it worked! meta name="keywords" content="automatic redirection"> – StacyM Jul 31 '13 at 19:29

score 0 · Answer 3 · answered Jul 30 '13 at 21:18

0

You want to add a queue function to the 'fx' queue (which is default) on your .animated element which does your redirect. that queue function will be automatically called when the transition/animation is finished.

$('.animated').queue('fx', function() {
    var url = $(this).attr('href');
    window.location = url;
});

// this will dequeue your added function automatically
$('.animated').addClass('fadeInRightBig');

answered Jul 30 '13 at 21:18

Derek

4,575
3
22
36

Use some imagination and maybe setTimeout and you'll get there. You can also try to leverage the .delay() function. – Derek Jul 31 '13 at 01:13
This was much easier. Got this from a non-stack friend. meta name="keywords" content="automatic redirection"> – StacyM Jul 31 '13 at 19:28

score 0 · Accepted Answer · edited Jul 16 '15 at 19:09

0

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">

edited Jul 16 '15 at 19:09

ricksmt

888
2
13
34

answered Jul 31 '13 at 19:28

StacyM

1,036
5
23
41

score 0 · Answer 5 · answered Oct 05 '14 at 12:50

You should use this flag :

animation_end = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";

This worked for me :

animation_end = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";

remove_hallway = function(){
    var hallway = $("#hallway_wrapper");
    hallway.addClass("animated");
    hallway.addClass("zoomOutUp");
    hallway.one(animation_end,function(){
        hallway.css("visibility","hidden");
        hallway.removeClass("zoomOutUp");
        hallway.removeClass("animated");
        $("#room_wrapper").css("visibility","visible");
        create_room(["Default",urls],"fadeInUp");
});

This code has worked for me. It will execute what's inside hallyway.one() only when the zoomOutUp animation that was invoked right before it finishes.

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

5 Answers5