title: jQuery CSS animations with addClass and removeClass
body: <p>So, I have now made jQuery Ajax code that checks that the username and password are correct. But instead of just displaying a error message, I'd like to shake the element as well.</p>
  
  <h2>Define Shake?</h2>
  
  <p>That kind of shake that wordpress has. Go to wordpress.com/wp-login.php and fill there some random info and the element shakes.</p>
  
  <p>That shake can be done by <a href="https://daneden.github.io/animate.css/">Animate.css</a>.</p>
  
  <h2>What's the problem then?</h2>
  
  <p>When the login fails, jQuery makes this.</p>
  
  <p><code>$('.element').addClass('shake');</code></p>
  
  <p>But because the shake element has CSS Animations that run only once, we won't be needing the CSS shake class after it shaked the element.</p>
  
  <p>So I tried:</p>
  
  <p><code>$('.element').addClass('shake').removeClass('shake');</code></p>
  
  <p>But that happens all too quickly.</p>
  
  <p>So I tried again:</p>
  
  <p><code>$('.element').addClass('shake').delay(1000).removeClass('shake');</code></p>
  
  <p>Still not play the animation and then remove the class <code>.shake</code> from the <code>.element</code>. If the user enters wrong details more then once then shake won't work.</p>
  
  <p>You can play with the fiddle <a href="http://jsfiddle.net/A8K3w/2/">here</a>.</p>
  
  <p>Goal is to be able to shake the element more then once by clicking the Shake button.</p>