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

标题说的都是，但我会更具体更详细。我花了三周的时间试图达到这个效果，但并不像听起来那么容易，而且开始令人沮丧

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

因此，我想用jquery animate（）函数为css的文本阴影属性设置动画；当你进入页面时，我想把它弄模糊；比如说

//css

因此，使用css将很容易使其在悬停时保持清晰

//css

但它怎么能让它变模糊变脆呢

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

$(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钩子，可以在这里找到：

不走运

如果可以，请帮助我：）

---

提前感谢。

如果我没有弄错的话，所有支持文本阴影的浏览器在其最新版本（Opera、Safari、Chrome、Firefox）中都支持css转换。还没有测试过它，但是你应该可以用它来设置文本阴影的动画。

如果我没有弄错的话，这就是你想要的：

谢谢你的回复。我试过你的方法；它是有效的：正如你在这里看到的。无论如何，它在safari和chrome中运行良好，但我必须更新到firefox（4）的最新版本才能在那里运行。也许通过jquery我可以得到更强大的支持？另外，firefox处理模糊的方式与其他浏览器不同：radius看起来更大。你可能会发现这是一个很好的例子。它用文本阴影动画展示了一些有趣的东西，其中一个是使用jquery csshooks设置半径动画，这对我很有用。

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

});