title: jQuery CSS Keyframing
body: <p>Trying to make a simple repeated keyframed animation with jQuery</p>
  
  <pre><code>$(document).ready(function() {
      $('body').mouseover(function() {
          var animateloop = 0;
  
          $(this).mouseout(function(){
              animateloop++;
          });
  
          while (animateloop !== 1) {
              $(this).delay(40).css(
                  'font-family':'Homestead'
              ).delay(40).css(
                  'font-family':'Arvo'
              );
          }
      });
  });
  </code></pre>
  
  <p>I thought this code above would work, but I don't understand jQuery all that much so I can't make it work.</p>
  
  <p>You can see this a JSFIDDLE here:</p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/JamesKyle/nPVxb/">http://jsfiddle.net/JamesKyle/nPVxb/</a></p>
  </blockquote>