CODEWITHSUNDEEP
javascriptcssanimation
Teemoh
Teemoh

Reputation: 342

How to link after the CSS-Animation?

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?

Upvotes: 0

Views: 205

Answers (2)

Johan H&#246;rnqvist
Johan H&#246;rnqvist

Reputation: 159

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!

Upvotes: 0

Zach Saucier
Zach Saucier

Reputation: 25954

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

Upvotes: 2

Related Questions