How do you stop color animations?

How do you stop color animations?

Ok I'm cycling an animation on a link so it appears to glow on and off, however when I mouse over it I would like the glow to stop and show the hover decoration.

Currently I have the following code which seems to ignore the stop() and as far as I can tell, the style attr is removing, but as the animation is not stopping, it's simply adding it again almost instantly.

  2. jQuery('#animateSpan').addClass('animateThis');
  3. runAnimation();
  4. function runAnimation(){
  5.       jQuery('.animateThis').animate({
  6.             color:'#fff'
  7.       },1000,function(){
  8.             jQuery(this).animate({
  9.                   color: '#666'
  10.             },1000,runAnimation());
  11.       });
  12. }
  13. jQuery('#animateSpan').hover(
  14.       function () {
  15.             jQuery('#animateSpan').stop();
  16.             jQuery('#animateSpan').removeClass('animateThis');
  17.             jQuery('#animateSpan').removeAttr('style');
  18.       },function () {
  19.             jQuery('#animateSpan').addClass('animateThis');
  20.             runAnimation();
  21.       }
  22. );

EDIT: Changed code to latest version, no change in effect though

Thanks in advance for any help :)