最好的办法模糊的jQuery

我一直在开发一个网页，我打开了一组工具和下面的一切模糊，除了重叠的工具图标。（像Mac的桌面应用）最好的办法模糊的jQuery

这里是如何我已经做到了：

HTML

<body> 
    <div id="tools"></div> 
    <div Id="Blur">in here I have all my page content</div> 
</body>

jQuery的

$(function(){ $('Blur').blur(); });

的事情是：这个工程，但问题一旦页面上有一些不太好的内容，模糊的进出就会变得非常缓慢。有没有人知道更好的方式来模糊页面，而不会对性能产生重大影响？

（如果格式不好看，或者您需要更多的信息，只是告诉我！这是我的第一篇文章与堆栈溢出）

谢谢！

来源

2017-06-15 Isaac S. Weaver

您使用的一些库创建模糊效果？ jQuery blur是onblur事件处理程序。你有jsfiddle吗？ –

你不正确选择来看，缺少引用任何插件/库，我怀疑任何值得插件的名称将覆盖现有的'模糊（）的'函数，事情是在你的例子确实不妥。记住，你可以使用CSS - Jack A在下面有一个例子。 – Santi

你可能想使用一个CSS blur filter。

#Blur { 
    filter: blur(1px); 
}

例如：https://jsfiddle.net/1duss393/

来源

2017-06-15 21:22:36

所以我用你的例子重新编写了我的代码。这是我的jsfiddle。 https://jsfiddle.net/edogLdy2/1/ 问题是，当有大量的网页内容的变化速度慢或laggy。有没有办法在使用转换时模糊很多内容而没有滞后？ –

@ IsaacS.Weaver使用CSS进行效果通常具有最佳性能，因为它是由浏览器实现的。我不知道任何技巧来优化CSS方法，但是如果您搜索了这些方法，您可能会发现一些技巧。 –

谢谢@JackA。我很感激！ –

在jQuery的模糊（）函数并不意味着什么东西模糊。当用户将例如点击外部元素或单击选项卡键时，它将工作的功能。它与focus（）相同，但是“reverse”。因此，如果您在html中输入了内容，并且您希望在用户关注输入时使用的功能（点击（）不相同，因为用户可以使用Tab键来关注输入），那么您将使用：

$("input").focus(){...};

但是如果你想要的功能，这将工作时，用户无焦点的方式从输入（点击之外，或按Tab键或更改Chrome标签 - 不管），那么你将使用：

$("input").blur(){...};

来源

2017-06-15 21:48:59

最好的办法模糊的jQuery

回答

相关问题