how to apply multiple css image filters using jquery

Question

How do I apply the following css code using jquery

#centeredImage
{
   -webkit-filter: grayscale(20%) invert(0) blur(1px); 
}

Already tried this, didn't work

$('#centeredImage').css('-webkit-filter','grayscale(20%) invert(0) blur(1px)'); 

Answer 1

Just use filter:

$('#centeredImage').css('filter','grayscale(20%) invert(0) blur(1px)');

jQuery automatically set prefixes.

Answer 2

You can use WebkitFilter instead:

$("#centeredImage").css({
    WebkitFilter: 'grayscale(20%) invert(0) blur(1px)'
})

Fiddle Demo

Answer 3

Maybe create css as a class

.centered-image
{
   -webkit-filter: grayscale(20%) invert(0) blur(1px); 
}

Then in jQuery

$('#centeredImage').addClass('centered-image');

At least this way your keeping the separation of javascript and styling...