Animating -webkit-filter with jQuery

Question

Okay, so I have a filter on a div, that's making the background image of that div greyscale by default using these css properties.

I understand my onblur and onfocus works and how to use them along with animate() using jQuery.

Such as this, which works and makes sense to me:

$('div.cell').hover(function() {
    $('div.cell').animate({

        border: 'none',
        height: '100px',
    }, 2000, function() {

    // Animation complete.

    });
});

Now I am having a problem with the syntax of animating certain css3 properties.

Instead of animating border: none and height: 100px but how do I get to animate these two properties???

filter: none;
-webkit-filter: grayscale(0);

What I have now is this:

$('#clickme').click(function() {
  $('#book').animate({
    filter: 'none'
  }, 5000, function() {
    // Animation complete.
  });
});

But I am getting MAJOR syntax errors while trying to animate -webkit-filter from grayscale(1); to grayscale(0);

Thanks guys! Let me know if there's anything else you need.

---

So here's what I have now....

$(function() {
    $("div.cell").focus(function(){
        alert('WHOA');
        $("div.cell").attr('grayNow');
    });
});​

and its not working still...

along with some css

.grayNow {
    -webkit-filter: grayscale(0); 
    filter: none;  
}​

I'm not even getting the alert! :(

Answer 1

I'm not sure why you would use jQuery animate to do this, as if you use transitions then these animations are hardware accelerated – jQuery animate should only be used as a last resort, or in situations where support is required in old browsers.

Anyway:

http://jsfiddle.net/Ej8s3/

In short, add a transition, make a class with the new properties, toggle it on and off using some JS. I've used jQuery, but it's trivial to do this without.