animating on hover textshadow with csshooks

animating on hover textshadow with csshooks

hi, i'm having an issue with this piece of code - can't get it to work right.
i'm using brandon aaron css hook for textshadow - thanks !

$(document).ready(function() {
(function($) {
var props = "Color X Y Blur".split(' '),
support = $.support,
rWhitespace = /\s/,
div = document.createElement('div'),
divStyle = div.style;

support.textShadow = (divStyle.textShadow === '');
div = null;

if ($.cssHooks && support.textShadow) {
$.each(props, function(i, suffix) {
var hook = 'textShadow' + suffix;

$.cssHooks[hook] = {
get: function(elem, computed, extra) {
return (function(elem, pos) {
var shadow = $.css(elem, 'textShadow'),
color = $.color.normalize(shadow),
ret;

if (pos === 0) {
ret = 'rgb'
+ (color.alpha ? 'a' : '') + '('
+ color.r + ', '
+ color.g + ', '
+ color.b
+ (color.alpha ? ', ' + color.alpha : '')
+ ')';
}
else {
ret = $.trim(shadow.replace(color.source, '')).split(rWhitespace)[pos - 1];
}

return ret;
})(elem, i);
},
set: function(elem, value) {
elem.style.textShadow = (function(string, value, index) {
var color_part = $.style(elem, 'textShadowColor'),
parts = string.replace(color_part, '').split(rWhitespace),
ret;

if (index === 0) {
color_part = value;
} else {
parts[index] = value;
}

return color_part + parts.join(' ');
})($.css(elem, 'textShadow'), value, i);
}
};

if (i !== 0) {
$.fx.step[hook] = function(fx) {
$.cssHooks[hook].set(fx.elem, fx.now + fx.unit);
};
}
});
}
})(jQuery);





$('.blurjq').css('textShadow'); // 


$('.blurjq').css('textShadow', '10px 10px 10px #000;');
$('.blurjq').css('textShadowX', '10px');
$('.blurjq').css('textShadowY', '10px');
$('.blurjq').css('textShadowColor', '#000');
$('.blurjq').css('textShadowBlur', '10px');


$('.blurjq').click(function() {
$(this).animate({ 'textShadowBlur': 100 }, 500);
});

});