JQUERY CSS: Is it possible to trigger css filters through JQuery?

Question

I'm working on a popup menu for mobile devices and would like for the website to blur and lighten in opacity when the menu pops up and go back to normal when it's closed. I figured a good way to go about doing it would be by triggering a css filter which led me to be unsure of the proper syntax to use in JQUERY. I looked into the matter more and so far I haven't been able to find examples of css filters being triggered in jquery so I continued playing with it to see if I could get it to work and so far have been unsuccessful.

Here are the scripts I came up with.

$("#menu").click(function(){
    $("#popup").fadeIn('slow');
    $("#close").css("display", "block");
    $("#menu").css("display", "none");
    $("p").css("opacity", 0.33);
    );

$("#close").click(function(){
    $("#popup").fadeOut('slow');
    $("#close").css("display", "none");
    $("#menu").css("display", "block");
    $("p").css("opacity", 1);
    });

The way I was trying to add in the css filter is

//This one shows no sign of the blur working but opacity works
$("p").css({"opacity": "0.33",
            "filter": "blur(88%)",
            "-webkit-filter": "blur(88%)",
            "-moz-filter": "blur(88%)"
             });



//These two break the whole code from working at all
$("p").css({"opacity": "0.33",
            "filter: blur(88%)",
            "-webkit-filter: blur(88%)",
            "-moz-filter: blur(88%)"
            });

$("p").css({"opacity": "0.33",
            "filter: blur()" "88%",
            "-webkit-filter: blur()" "88%",
            "-moz-filter: blur()" "88%" 
             });

Of course these are attempts to create the blur which I added to the "menu" button. Here's a fiddle of it https://jsfiddle.net/Optiq/hsvvpfzu/5/

The more I looked and couldn't find anything made me wonder if this is at all possible. Maybe it's just me not knowing specific enough stuff to search for in order to find something relevant. Any source of info talking about using css filters in jquery are welcome.

UPDATE

The fiddle just simulates the code I've been working with on my site so it wasn't clear as to the element I was trying to effect. I have each page wrapped in a div that has a class name but no id. The reason I didn't give it an id is because I use it over and over on each page, so I figured it would be cleaner to just use the jquery to target the class and add attributes that way rather than giving each div a unique id then passing them all into a variable or something.

Have you tried just preparing classes for the css rules and then switching the element's classes with addClass and removeClass? — Don Bhrayan Singh
– Don Bhrayan Singh, Commented Sep 17, 2016 at 5:29
I just updated the post to show why I'm trying to do it this way. Thanks for pointing that out guys. — Optiq
– Optiq, Commented Sep 17, 2016 at 5:38
According to MDN, blur() does not accept percentage values. Have you tried changing them to pixel values? — Obsidian Age
– Obsidian Age, Commented Sep 17, 2016 at 5:42

Obsidian Age · Accepted Answer · 2016-09-17 05:46:18Z

2

Of your three examples, the first one uses the correct syntax. The problem is that blur doesn't accept percentage values, only pixels. Defining them as pixels as such appears to have the desired effect for me:

$("p").css({
    "opacity": "0.33",
    "filter": "blur(1px)",
    "-webkit-filter": "blur(1px)",
    "-moz-filter": "blur(1px)"
})

Hope this helps! :)

answered Sep 17, 2016 at 5:46

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sandip - Frontend Developer · Accepted Answer · 2016-09-17 05:29:57Z

2

Why not you assign and remove clss instead of css, implement with class is better one, you can also assign CSS but it require more code.

$(document).ready(function(){
$("p").addClass("myClass");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
  .myClass{
    opacity: 0.33;
    filter: blur(88%);
    -webkit-filter:blur(88%);
     -moz-filter: blur(88%);
    color:red;
  }
 </style>
 
<p>Sandip Patel</p>

answered Sep 17, 2016 at 5:29

Sandip - Frontend Developer

14.7k5 gold badges38 silver badges62 bronze badges

2 Comments

Optiq Over a year ago

Sorry I just updated the post to address this. The reason why is because it's a div that I use as a container for the entire page and I use it over on each of my pages. So I didn't give it an id because so far I didn't think I'd need to trigger it with an id. So my first mind was to just call up the class with jquery and modify the css attributes, instead of having to pass a bunch of different IDs through it.

vals Over a year ago

There are 2 different issues. targeting where to apply the changes (using whatever selectors you want) is indepenent of what you done once you have get the elements . I believe adding a class with the blur style is your best option.

Collectives™ on Stack Overflow

JQUERY CSS: Is it possible to trigger css filters through JQuery?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related