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/ (单击图像以动画消除模糊)。