I’m working with the tutorial [“Having fun with Blurred Text”](https://css-tricks.com/fun-with-blurred-text/ “Having fun with Blurred Text”), I’ve replicated the animation (the last example) and it’s working as intended. However I am now trying to add an on-hover to the animation. I basically want the animation to stop on mouseover and resume on mouseout. I’ve never worked with pausing animations in CSS3 so I am at a loss.
The jsFiddle is located [here](http://jsfiddle.net/XVBjL/ “here”).
As of right now, it just keeps restarting the animation on hover. I’d like to have the dropshadow & blur removed for the duration of the hover. Is using .stop() the right direction or am I totally off the mark with this? Thanks for the help! (Also love the podcast Chris & Dave if you read this! )
$(“#menu_text”).mouseover(function() {
$(“#menu_text”).stop()
});
$(“#menu_text”).mouseout(function() {
// apply spans
$(“#menu_text”).lettering();
var text = $(“#menu_text”),
numLetters = text.find(“span”).length;
function randomBlurize() {
text.find(“span:nth-child(” + (Math.floor(Math.random()*numLetters)+1) + “)”)
.animate({
‘textShadowBlur’: Math.floor(Math.random()*10)+2,
‘textShadowColor’: ‘rgba(255,255,255,’ + (Math.floor(Math.random()*200)+55) + ‘)’
});
// Call itself recurssively
setTimeout(randomBlurize, 5);
} // Call once
randomBlurize();
});
