4

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

  $.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

好的，我修好了。似乎是步进函数定义或其他东西的jquery bug。无论如何，这将起作用：

  $('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'});
     }});
  });
4

2 回答 2

2

您的语法无效。您当前正在关闭hover鼠标悬停功能后的事件。

尝试：

$('a').hover(
    function(){     
        $(this).stop().animate({textShadowBlur:16}, {duration: 400});     
    }, 
    function(){     
        $(this).stop().animate({textShadowBlur:0}, {duration: 900});   
});
于 2011-08-10T18:09:20.687 回答
2

看起来像语法问题

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

编辑

看起来您已经找到了解决方法，这里有一个使用 css 3 过渡来实现此效果的选项：

小提琴

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;
}
于 2011-08-10T18:09:32.637 回答