title: jquery delay a link from being followed
body: <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="https://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>