javascript – 无法在mouseout上运行jQuery效果

我不知道为什么,但是悬停“out”函数中的animate()似乎从0值开始,而不是16应该由悬停“in”函数设置：

  $.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});
  });

因此,鼠标输出时会出现突然的文本阴影更改,没有动画

我究竟做错了什么？

jsfiddle

解决方法:

看起来像语法问题

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

编辑

看起来你已经找到了解决办法,这里有一个选项,用css 3过渡来做这个效果：

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;
}