How to link after the CSS-Animation?

Question

I have a simple loading-bar, that gets fuller and fuller after entering my homepage (animated with CSS-animations). When the bar is completly filled, the user should be linked to the next site.

HTML is short:

<div id="loadingbar">

    <div id="loadingprogress">
    </div>

</div>

I found this JS-Code but it just doesnt work:

$("#loadingprogress").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
    window.location.href = "http://www.google.com";
});

What is wrong?

see http://api.jquery.com/animate/ you looking for complete function? — Cracker0dks, Dec 04 '13 at 15:53
Hey, the loadingbar is already animated, I just need a Javascript that detects when the CSS-animation is over and then links the user to another page. — Teemoh, Dec 04 '13 at 15:56
Maybe this post can help to you http://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes — Anon, Dec 04 '13 at 15:59
then search this animation call in your code ? and append .complete(function()... — Cracker0dks, Dec 04 '13 at 15:59
Can you please post the css? It makes a difference. A fiddle would also be helpful. — sn3ll, Dec 04 '13 at 16:25
Also, that is not Javascript, that is jQuery. Do you have jQuery loaded on your page? — sn3ll, Dec 04 '13 at 16:32

score 2 · Accepted Answer · answered Dec 04 '13 at 16:54

2

Apply it to loadingprogress, the one you're animating, instead of its parent

$("#loadingprogress").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
    window.location.href = "http://www.google.com";
});

Updated jsFiddle

answered Dec 04 '13 at 16:54

Zach Saucier

24,871
12
85
147

Sry for little chaos, I uploaded a something different Fiddle (the HTML) than I wrote in my question. Stupid of me to use different Codes, but I edited it. It looks good in your Fiddle, but when I integrate it into my website, it doesnt work. Im not sure how to include the jQuery in my HTML-Code. This http://jsfiddle.net/q5MDs/1/ is not working. – Teemoh Dec 04 '13 at 17:16
@user2807296 [**Try it this way**](http://jsfiddle.net/Zeaklous/vL95b/). You *should* be able to copy-paste it directly into your page source – Zach Saucier Dec 04 '13 at 17:23
:) Yes its working! Thank you! The problem was, that I did not write the jQuery-Link into the Head. I thought its enough to use it once before the JavaScript-Codes start and to close it after it ends! Working! Thank you! – Teemoh Dec 04 '13 at 17:29
@user2807296 No problem. Would you mind accepting the answer by clicking the check mark next to it? – Zach Saucier Dec 04 '13 at 17:35

Johan Hörnqvist · Answer 2 · 2013-12-04T22:22:45.260

First I have some small questions. What jQuery and browser are u testing this on? I did a small fiddle with jQuery 1.10. Here I used "on" instead of "bind" and got it to work. I hope my code can help u some.

Tested on: Google chrome Version 31.0.1650.57 FF 25.0.1 Safari 6.1.1

HTML

<div id="loadingbar">
    <div id="loadingprogress">
    </div>
</div>

CSS

#loadingbar{
    background-color:black;
    overflow:hidden;
    width:200px;
    height:20px;
}

#loadingprogress {
  width:100%;
  height:100%;
  background-color:green; 
  -webkit-animation: moveFromLeft 1.5s ease both;
  -moz-animation: moveFromLeft 1.5s ease both;
  animation: moveFromLeft 1.5s ease both;
}
    @-webkit-keyframes moveFromLeft {
      from { -webkit-transform: translateX(-100%); }
    }a
    @-moz-keyframes moveFromLeft {
      from { -moz-transform: translateX(-100%); }
    }
    @keyframes moveFromLeft {
      from { transform: translateX(-100%); }
    }

javascript

(function($){
    var animEndEventNames = ['webkitAnimationEnd',
        'oAnimationEnd',
        'MSAnimationEnd',
        'animationend'].join(" ");
    $("#loadingbar").on(animEndEventNames, function(e){
        window.location.href = "/test.htm";
    });
}(jQuery));

Here is a link to my jsfiddle. I hope it helps!

Im using Firefox 25.0.1. Is it enough to include the jquery in HTML like follwing? — Teemoh, Dec 04 '13 at 17:03
Then u can still use bind and u can bind the event on the parent, because the event is delegated and will therefore trigger anyway. I'll update the fiddle with the correct version of jquery and the animation inside of the parent so u can have a look at it again. — Johan Hörnqvist, Dec 04 '13 at 22:18

How to link after the CSS-Animation?

2 Answers2