jQuery 动画高斯模糊

Posted 2023-05-08

【中文标题】jQuery 动画高斯模糊

【英文标题】：jQuery Animated Gaussian Blur

【发布时间】：2011-12-24 00:59:45

【问题描述】：

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

因为我已经为网站上的其他东西加载了 jQuery 核心，所以我真的很想使用 jQuery。我找到了this example，但它使用的是YUI，我宁愿不要为了这个效果在jQuery之上加载YUI。

【问题讨论】：

我还发现这个插件是一个可能的解决方案：plugins.jquery.com/project/blurimage

【参考方案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/（单击图像以动画消除模糊）。

【讨论】：

不重新打开已经回答的线程，但是是否可以在不单击触发切换的情况下执行此操作？我可以在文档就绪功能中进行 onload 吗？

是的，您需要做的就是删除绑定到click 事件的代码行，它将在document.ready 上运行。这是我的第一个 jsfiddle 的链接，更改为在 document.ready 而不是 click 上运行：jsfiddle.net/2FZ3Z/6。请注意，您可能希望在window.load 而不是document.ready 上运行代码，因为图像将在window.load 事件触发时加载，但在document.ready 事件触发时可能不会加载。

这就是我的想法，但是当我在没有点击的情况下这样做时。它基本上看起来像是在单个图像中消失。这是我的语法：$(window).load(function() $('#blurred, #focused ').fadeToggle(7500, function () ); );

您可以使用 FireBug 的 Net 面板查看正在下载哪些资源以及下载时间，以确保在动画播放之前加载两个图像。

原来问题出在它嵌入的滑块上。当我把它从那里拉出来时，它做得更好。

【参考方案2】：

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

你可以计时，锐化等等。