4

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'});
     }});
  });
Alex
  • 66,732
  • 177
  • 439
  • 641

2 Answers2

2

Your syntax is invalid. You are currently closing the hover event after the mouseover function.

Try:

$('a').hover(
    function(){     
        $(this).stop().animate({textShadowBlur:16}, {duration: 400});     
    }, 
    function(){     
        $(this).stop().animate({textShadowBlur:0}, {duration: 900});   
});
Robert
  • 8,717
  • 2
  • 27
  • 34
2

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;
}
MikeM
  • 27,227
  • 4
  • 64
  • 80
  • no, I just made a mistake when pasting here. I still have the problem – Alex Aug 10 '11 at 18:11
  • I see the issue now, checking it out...also are css3 transitions an option or you need this in jQuery? – MikeM Aug 10 '11 at 18:19