jQuery动画高斯模糊

Question

在我正在设计的网站的主页上，我希望最初的英雄形象能够从模糊（高斯）变为锐利。我环顾四周，并且惊讶于没有一个明显的jQuery解决方案来做这件事。我错过了什么吗？

由于我已经在网站上为其他东西加载jQuery核心，我真的很喜欢使用jQuery。我找到了this example，但它正在使用YUI，而我宁愿不在jQuery之上加载YUI而只是为了这个效果。

Answer 1

如何在照片编辑程序中创建模糊效果，然后在模糊图像和非模糊图像之间淡入淡出：

jQuery(function ($) {
    $('#blurred_image, #focused_image').fadeToggle(1500, function () {
        //this callback function could be used to show a message or whatever else...
    });
});

这是一个jsfiddle：http://jsfiddle.net/jasper/2FZ3Z/1/（请注意，您需要点击图片才能触发从模糊到非模糊图像的过渡。）

对图像进行去模糊化的另一种方法是将相同的图像放在自身上，将其移动几个像素，然后更改其不透明度，以便用户可以看到下面的原始图像。然后为叠加图像设置动画。然而，这看起来更像是线性模糊而不是高斯模糊。

这是一个jsfiddle：http://jsfiddle.net/jasper/FTt3b/（点击图片动画模糊）。

Answer 2

检查这个库，它可以让你完全找到你想要的东西而不需要重复的图像：http://labs.bigroomstudios.com/libraries/animo-js

你可以计时，锐化等等。