jquery - jQuery 动画高斯模糊

Question

在我正在设计的网站的主页上，我希望初始英雄图像从模糊（高斯）变为清晰的动画。我环顾四周，惊讶地发现没有一个显而易见的 jQuery 解决方案可以做到这一点。我错过了什么吗？

由于我已经为网站上的其他内容加载了 jQuery 核心，我真的很希望它能够使用 jQuery。我找到了这个例子，但它使用的是 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

你可以计时，锐化它，等等。