CODEWITHSUNDEEP
javascriptjquerycssanimation
pHenomen
pHenomen

Reputation: 153

Page transition delay after link is clicked (after animation end)

I searched for similar problems but none of the solutions didn't help me.

So, here is my problem, i have in my header a few link for other pages (about, porftiolio etc...) and i have one animation in javascript when <a> element is clicked. But my page transition is instantly so that animation can't be seen. So what should i do to maybe stop page transition for a few second till my animation's end. Here is an example: http://codepen.io/anon/pen/zrXrXM . Can somebody help me what should i do to stop transition until my animation ends.

Upvotes: 1

Views: 2083

Answers (2)

BenG
BenG

Reputation: 15154

preventDefault to stop the re-direct, then change the window.location on the animation complete.

$("a").click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    $(".header").slideUp("slow", function(){
      window.location = href; 
    });
});

Updated CodePen

Upvotes: 1

IsraGab
IsraGab

Reputation: 5185

You can use the setTimeout() function look here: http://codepen.io/SitePoint/pen/Ejxvjr Explain here:http://www.sitepoint.com/jquery-settimeout-function-examples/

Upvotes: 0

Related Questions