jquery delay a link from being followed
- by Dan Sinker
I have a short css-based animation that I want to play out before a link is followed (a card that swooped in on page load swoops out after click). Currently, however, the page called loads too quickly. I want to be able to briefly delay the href from being followed.
Here's what I've got:
$(document).ready(function() {
$("#card").css("top","0px");
$(".clickit").click(function() {
$("#card").css("top","-500");
});
});
The first line swoops the card in on page load. After that is the click call that modifies the CSS, but like I said there needs to be some kind of delay in there because the page loads immediately, instead of after the animation. The CSS that is modified looks like this:
#card {
width: 400px;
height: 500px;
position: relative;
top: -500px;
-webkit-transition:all .5s;
}
(yes, I know this is webkit-only right now)
This is a problem very similar to this question from 2008, but I know jQuery has been updated significantly since then, so I wanted to see if there was a more modern solution.
Thank you!
