Jquery 动画 - 在悬停时动画文本阴影 css 以实现从模糊到清晰文本的缓慢效果答案

【问题标题】：Jquery animation - animating text shadow css on hover to achieve a slow effect from a blurred to a crisp textJquery 动画 - 在悬停时动画文本阴影 css 以实现从模糊到清晰文本的缓慢效果
【发布时间】：2011-04-20 11:55:44
【问题描述】：

标题说明了一切，但我会更加具体和详细。我试图达到这个效果已经 3 周了，但这并不像听起来那么容易，而且开始令人沮丧。

我希望在悬停时为文本阴影设置动画，以实现从模糊到清晰文本的缓慢效果。

所以，我想用 jquery animate() 函数对 css 的 text shadow 属性进行动画处理；当您进入页面时，我想让它变得模糊；比如像

//css

.blur{color: transparent; text-shadow: 0px 0px 40px #000}

所以使用 css 很容易让它在悬停时变得清晰；

//css

.blur:hover{color: transparent; text-shadow: 0px 0px 0px #000}

但如何让它变慢变清晰？

我在网上找到了很多例子，但没有一个像我想要的那样工作。现在这是我正在使用的实际代码。

$(document).ready(function() {

$.fx.step.textShadowBlur = function(fx){
$(fx.elem).css({'text-shadow': '0px 0px' + Math.floor(fx.now) + 'px #000'});
};

$('.blur').hover(function(){
$(this).animate({ textShadowBlur: '10px'}, console.log('antani'), 1000);
});

});

我创建了 CSS 的虚拟属性，因为我知道 jquery 不支持文本阴影，因为它是一个多变量属性。

我还尝试了 Brian Aaron 的 jquery css hook，可以在这里找到：

https://github.com/brandonaaron/jquery-cssHooks/blob/master/textshadow.js

运气不好。

如果可以的话请帮帮我:)

提前致谢。

【问题讨论】：

标签： jquery css animation

【解决方案1】：

如果我没记错的话，所有支持 text-shadow 的浏览器在其最新版本（Opera、Safari、Chrome、Firefox）中都支持 css 转换。尚未对其进行测试，但您应该可以使用它为 text-shadow 设置动画。

【讨论】：

感谢您的回复。我试过你的方法；它有效：dimitrinube.com/work/francescovanstraten，如您所见。无论如何，它在 safari、chrome 中运行良好，但我必须更新到最新版本的 firefox ( 4 ) 才能让它在那里工作。也许有了 jquery 我可以得到更强大的支持？此外，Firefox 处理模糊的方式与其他浏览器不同：半径看起来更大。
你可能会发现这个article on css-tricks iteresting。它通过文本阴影动画显示有趣的东西，其中之一是使用 jquery csshooks 为半径设置动画，它适用于我。

【解决方案2】：

如果我没记错的话，这就是您要查找的内容：http://tympanus.net/Tutorials/BlurMenu/index5.html

【讨论】：