jquery delay a link from being followed
<p>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. </p>

<p>Here's what I've got:</p>

<pre><code>$(document).ready(function() {
    $("#card").css("top","0px");
    $(".clickit").click(function() {
        $("#card").css("top","-500");
    });
});
</code></pre>

<p>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:</p>

<pre><code>#card {
  width: 400px;
  height: 500px;
  position: relative;
  top: -500px;
  -webkit-transition:all .5s;
}
</code></pre>

<p>(yes, I know this is webkit-only right now)</p>

<p>This is a problem very similar to <a href="http://stackoverflow.com/questions/351268/how-to-stop-link-being-followed-until-after-jquery-animate-has-complete">this question</a> from 2008, but I know jQuery has been updated significantly since then, so I wanted to see if there was a  more modern solution.</p>

<p>Thank you!</p>
