无法在鼠标移出时运行jQuery效果

Question

我不知道为什么，在悬停"out"函数中的animate()似乎从0值开始，而不是应该由悬停"in"函数设置的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在定义步骤函数时出现了错误或其他问题。无论如何，下面的代码可以正常工作:

  $('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

---

修复了，那不是问题所在。 - Alex

Answer 1

您的语法无效。您当前在鼠标悬停函数之后关闭了hover事件。

尝试：

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

- Robert

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

- MikeM

---

不，我只是在这里粘贴时犯了一个错误。我仍然有问题。 - Alex

我现在看到问题了，正在检查……另外，CSS3过渡效果可行吗？还是你需要用jQuery实现？ - MikeM