jQuery - How to adjust CSS filter (blur)?

Question

Haven't had much luck with this one. I have the following set via CSS on a div (let's call it div.test):

filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);

How can I adjust this via the .css function using jQuery. I'd like to set each of them to 0px. Thanks in advance for the help.

Answer 1

$('.test')
.css({
   'filter'         : 'blur(0px)',
   '-webkit-filter' : 'blur(0px)',
   '-moz-filter'    : 'blur(0px)',
   '-o-filter'      : 'blur(0px)',
   '-ms-filter'     : 'blur(0px)'
});

Answer 2

Try something like this:

var filterVal = 'blur(0px)';
$('.test')
  .css('filter',filterVal)
  .css('webkitFilter',filterVal)
  .css('mozFilter',filterVal)
  .css('oFilter',filterVal)
  .css('msFilter',filterVal);