JQuery 中的动画雾/模糊效果答案

【问题标题】：Animate Fog / Blur effect in JQueryJQuery 中的动画雾/模糊效果
【发布时间】：2013-08-10 17:39:30
【问题描述】：

我正在使用foggy Jquery plugin 来模糊我网站上的文本元素。我需要一个可以获取几秒钟的代码，并且它将在我传递给函数的时间（以秒为单位）中动画从 blurRadius X（请参阅链接）到 blurRadius: 1（表示常规文本）的模糊效果。

所以当我调用该函数并以秒为单位传递时间时，它将动画雾模糊效果。现在该库支持开箱即用的静态效果。但是如果我们使用某种类型的计时器，这可以为效果设置动画。我需要你的帮助来编写产生这种动画的代码。谢谢。

我对其他插件持开放态度。但是，Foggy 插件支持 IE 的后备（仅使用不透明度），这是我需要的。

【问题讨论】：

标签： javascript jquery jquery-plugins

【解决方案1】：

很久以前，但这里至少是一个简单解决方案的提示：

BlurPass.prototype.render = function(target){
 $('<div/>', {
   html: this.content, 'class': 'foggy-pass-'+this.position
 }).css({
   position: this.position,
   opacity: this.opacity,
   top: this.offset[0],
   left: this.offset[1]
 }).appendTo(target).fadeIn('slow');
};

只需将 .fadeIn('slow'); 添加到 append-func

另请参阅：jQuery using append with effects

【讨论】：