Question

I don’t know why, but the animate() in the hover “out” function seems to start from the 0 value, instead of 16 which should be set by the hover “in” function:

  $.fx.step.textShadowBlur = function(fx) {
    $(fx.elem).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px #000'});
  };

  $('a').hover(function(){
    $(this).stop().animate({textShadowBlur:16}, {duration: 400});
  }, function(){
    $(this).stop().animate({textShadowBlur:0}, {duration: 900});
  });

So I get a abrupt text shadow change on mouse out, no animation

What am I doing wrong?

jsfiddle

---

ok, I fixed it. It seems to be jquery bug with the step function definition or something. ANyway this will work:

  $('a').hover(function(){
    $(this).stop().animate({nothing:16}, {duration: 400, step: function(now, fx){
       $(this).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px #000'});
     }});
  }, function(){
    $(this).stop().animate({nothing:0}, {duration: 900, step: function(now, fx){
       $(this).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px #000'});
     }});
  });

Answer 1

looks like a syntax issue

$('a').hover(function() {
    $(this).stop().animate({textShadowBlur: 16}, {duration: 400});
    // remove the extra }});
}, function() {
    $(this).stop().animate({textShadowBlur: 0}, {duration: 900});
});

EDIT

looks like you already found a work-around, here’s an option to do this effect with css 3 transitions:

fiddle

a {
    font-size:40px;
    text-shadow:0 0 0 #000;
    -webkit-transition:text-shadow .9s linear;
}
a:hover {
    text-shadow:0 0 16px #000;
    -webkit-transition:text-shadow .4s linear;
}