CODEWITHSUNDEEP
javascriptjqueryhtmlanimationanchor
Tyharo
Tyharo

Reputation: 383

Play Animation Then Load Next Page

I have a simple jQuery animation and its assigned to a div with an anchor tag around it, this animation only plays when clicked. I'm wondering if there is a way to have the animation play completely then direct the user to the next page.

Here is the code for the animation if it will help:

$(".magicdiv4").click(function() {  
  $(".magicdiv4").addClass('magictime swashOut');  
});

Any help is appreciated!

Upvotes: 0

Views: 2254

Answers (1)

DigitalZebra
DigitalZebra

Reputation: 41513

So, I'm assuming you are using transitions for animations. If so, modern browsers will fire a callback when the transition has completed. You want to listen to that transition end event and then run the code which transitions to your next page.

I've created a Plnkr which shows how this would work: http://plnkr.co/edit/wJz4cQPtW7RrQ6zeuHyp?p=preview

Here is the code which listens to those events and should do what you want:

$(document).ready(function() {
  $(".magicdiv4").click(function() {
    $(".magicdiv4")
      .addClass('magictime')
      .bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", 
      function() {
        alert('load next page here');
      });
  });

Here is the example CSS:

.magicdiv4 {
  background-color: green;
}

.magictime {
  transition: background-color 2s ease;
  background-color: red;
}

And finally, the HTML:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div class="magicdiv4">
      hello world
    </div>
  </body>

</html>

Note that if you are using animations instead of transitions, the events you want to listen to should look like this:

.bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() { });

Upvotes: 2

Related Questions