Simple Yoyo Effects Using jQuery

A few days ago I wrote about Link Nudging, and I got to thinking this could easily be a lot more customizable and flexible, so I added a couple lines more to it and now you can give most any css attribute a "Yoyo" effect. Maybe yoyo isn't the best word to describe it but hey, this was a late night of programming.

jQuery.fn.yoyo = function(attr,o){
        o = jQuery.extend({},{ range:20, speed:400, easing: 'linear' },o);
        var r = { hover:{ attr: o.range }, out:{} };
        r['hover'][attr] = '+='+ o.range;
        r['out'][attr] = '-='+ o.range;
        jQuery(this).hover(function() { //mouse in
            jQuery(this).animate(r.hover, o.speed, o.easing);
        }, function() { //mouse out
            jQuery(this).animate(r.out, o.speed, o.easing);

That's not so bad. Now to call this mighty beast say we want to change textIndent by a range of 20px:

$('.box1').yoyo('textIndent',{ range: 20 });

Or we might want to change letterSpacing by 3, which will give it a stretching effect:

$('.box2').yoyo('letterSpacing',{ range: 3 });

So now you want to see that it actually works,.. I have a demo just for you!