简体   繁体   English

在JQuery中使用Anog Fog / Blur效果

[英]Animate Fog / Blur effect in JQuery

I am using foggy Jquery plugin to blur text elements on my site. 我使用有雾的Jquery插件来模糊我网站上的文本元素。 I need a code that can get a number of seconds, and that will animate the blur effect from blurRadius X (see the link) to blurRadius: 1 (means regular text) across the time in seconds that I pass to the function. 我需要一个可以获得几秒钟的代码,这会将blurRadius X(请参阅链接)中的模糊效果设置为blurRadius:1(意味着常规文本),并在几秒钟内传递给函数。

So when I call the function and pass the time in seconds, it will animated the fog blur effect. 因此,当我调用函数并在几秒钟内传递时间时,它将为雾模糊效果设置动画。 Right now the library support a static effects out of the box. 现在,该库支持开箱即用的静态效果。 But if we use some type of timer this can animate the effect. 但是如果我们使用某种类型的计时器,这可以激活效果。 I need your help in a code that product this type of animation. 我需要你的代码中的帮助,以产生这种类型的动画。 Thanks. 谢谢。

I am open to other plugins. 我对其他插件持开放态度。 However, the Foggy plugin supports fallback for IE (use only opacity), which I need. 但是,Foggy插件支持IE的后备(仅使用不透明度),这是我需要的。

long time ago, but here is at least a hint for a simple solution: 很久以前,但这里至少是一个简单解决方案的提示:

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

just add .fadeIn('slow'); 只需添加.fadeIn('慢'); to the append-func 到append-func

see also: jQuery using append with effects 另见: jQuery使用append with effects

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM