JQuery - make an element go “fuzzy”

Question

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

Answer 1

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%.

Answer 2

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/