JQuery - 使元素变得“模糊”
我最近正在为一家公司开发一个网站，具有完整的管理前端/CMS。在管理前端，不幸的是，出于安全原因我无法向您展示，有一个范围列表、集合列表和设计列表。我想使用 JQuery 制作这些链接，因此单击“范围”会将范围列表带到前面，并淡出当前活动列表，同时使其变得模糊。我想让 Range 列表默认位于其他列表的前面，不透明度约为 50%（大胆猜测）。然而，如果不透明度为 50%，您仍然可以看到其后面的文本（在其他列表中）。我希望背景中的文本（“后面”列表）是灰色且模糊的，就像我刚刚注意到的效果，如果您在 Windows Live Mail 前面有一个 Windows 照片查看器窗口 - 状态文本位于右下角Windows Live Mail 是模糊的，并且在后面的窗口上非常明显）。我还希望前景中的文本为黑色且清晰。更改文本颜色很容易（柠檬汁！）。我对“JQuery fuzzy”和类似术语进行了快速谷歌搜索，但什么也没找到。
谁能告诉我是否有办法做到这一点（最好像 $(selector).fuzz(50%); 这样简单）？
提前致谢。
问候，
理查德
I have recently been developing a website for a company, with a full administration front end / CMS. In the Admin frontend, which unfortunately I cannot show you for security reasons, there is a Range list, Collection list and Design list. I would like to make the links for these work with JQuery, so clicking "Ranges" brings the Range list to the front and fades out the currently active list, making it fuzzy at the same time. I would like to make it so that the Range list is in front of the other lists by default, at about 50% opacity (wild guess). However with 50% opacity you would still be able to see the text behind it (in the other lists). I would like the text in the background (the "behind" lists) to be grey and fuzzy, like the effect I just noticed if you have a Windows Photo Viewer window in front of Windows Live Mail - the status text a the bottom right of Windows Live Mail is fuzzy, and quite obviously on the window behind). I would also like the text in the foreground to be black and in focus. Changing text colour is easy (peezy lemon squeezy!). I have done a quick Google on "JQuery fuzzy" and similar terms but found nothing.
Can anyone tell me if there is a way to do this (preferably as simple as $(selector).fuzz(50%);)?
Thanks in advance.
Regards,
Richard
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
当你期待答案时，发现一场无益的争吵总是令人失望的。我不会判断“模糊”某个元素的必要性——相反，我只是尝试提供帮助。
我见过实现这种效果的唯一简单方法是使用名为“Spoiler Alert”的 jQuery 插件 -- http://joshbuddy.github.io/spoiler-alert/
It's always disappointing to find an unhelpful squabble when you expect an answer. I won't judge the necessity of 'fuzzying' an element -- instead, I'll just attempt to be helpful.
The only easy way that I have ever seen to achieve this effect is using a jQuery plugin called 'Spoiler Alert' -- http://joshbuddy.github.io/spoiler-alert/
不，您无法使用 CSS 或 jQuery “轻松”地做到这一点。
甚至不是一个复杂的解决方法，除非您考虑将表单当前状态的屏幕截图发送到服务器，然后让它发回处理后的版本进行显示，很简单。
根本没有解决方案，也不是任何人都想要这样。如果您需要背景在视觉上不干扰前景，只需将不透明度降低到 80-90% 即可。
No, you cannot do this 'easily', with either CSS or jQuery.
Not even a complex workaround, unless you consider sending a screenshot of the form's current state to a server, then having it send back a processed version to display, simple.
There simply isn't a solution, not that anybody would want this. If you need the background to not visually interfere with the foreground, simply reduce the opacity to something like 80-90%.