jQuery动态高斯模糊效果

Question

在我设计的网站首页，我希望初始英雄图像从模糊（高斯）到清晰地动画显示。我查找了一些资料，惊讶地发现没有一个明显的jQuery解决方案来实现这个效果。我是不是错过了什么？

由于我已经为网站上的其他事物加载了jQuery核心，所以我真的希望它能够利用jQuery。我找到了这个例子，但它使用的是YUI，我不想在jQuery之上再加载YUI来实现这个效果。

- Keefer

---

我也发现这个插件可能是一个解决方案：http://plugins.jquery.com/project/blurimage - Keefer

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/（单击图像以消除模糊）。

- Jasper

---

不想重新打开已经回答的主题，但是能否在不点击触发切换的情况下完成这个操作？我能否在文档准备好函数中进行加载？ - Keefer

是的，你只需要删除绑定到“click”事件的代码行，它就会在“document.ready”上运行。这是我的第一个jsfiddle链接，已经修改为在“document.ready”而不是在“click”上运行：http://jsfiddle.net/2FZ3Z/6/。请注意，您可能希望在“window.load”上运行代码，而不是在“document.ready”上运行，因为当“window.load”事件触发时，图像将被加载，但当“document.ready”事件触发时，它们可能尚未加载。 - Jasper

这就是我想到的，但当我不用点击时执行它。它基本上看起来像是在淡入一个单独的图像。这是我的语法： $(window).load(function() { $('#blurred, #focused ').fadeToggle(7500, function () { }); }); - Keefer

你可以使用 FireBug 的 Net 面板来查看正在下载的资源以及它们何时被下载，以确保在动画播放之前两个图像都已加载。 - Jasper

问题原来在嵌入滑块的位置上。只要我把它从那里拿出来，它就表现得更好了。 - Keefer

Answer 2

看看这个库，它可以让你做到你想要的，而不需要重复的图像：http://labs.bigroomstudios.com/libraries/animo-js

你可以计时、调整它，等等。

- pfrank