Unable to start jQuery effect to run

Question

I do not know why, but the animate () function in the "out" function is induced starting from the value 0 , not 16 , which must be set by the "in" function: / p>

  $.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 sharp change in the shadow of the text on the mouse, without animation

What am I doing wrong?

jsfiddle

---

ok, I fixed it. This seems to be a jquery error with defining a step function or something else. In any case, 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 problem

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

Strike>

EDIT

It looks like you have already found a workaround, here is an option to make 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; } 

Answer 2

Your syntax is invalid. You close 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}); });