jQuery CSS Keyframing

Question

Trying to make a simple repeated keyframed animation with jQuery

$(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'
            );
        }
    });
});

I thought this code above would work, but I don't understand jQuery all that much so I can't make it work.

You can see this a JSFIDDLE here:

http://jsfiddle.net/JamesKyle/nPVxb/

Answer 1

one error first:

$(this).delay(40).css(
   'font-family':'Homestead'
)

the colon：

$(this).delay(40).css(
   'font-family','Homestead'
)