title: Animating -webkit-filter with jQuery
body: <p>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.</p>
  
  <p>I understand my onblur and onfocus works and how to use them along with animate() using jQuery.</p>
  
  <p>Such as this, which works and makes sense to me:</p>
  
  <pre><code>$('div.cell').hover(function() {
      $('div.cell').animate({
  
          border: 'none',
          height: '100px',
      }, 2000, function() {
  
      // Animation complete.
  
      });
  });
  </code></pre>
  
  <p>Now I am having a problem with the syntax of animating certain css3 properties.</p>
  
  <p>Instead of animating <code>border: none</code> and <code>height: 100px</code> but how do I get to animate these two properties???</p>
  
  <pre><code>filter: none;
  -webkit-filter: grayscale(0);
  </code></pre>
  
  <p>What I have now is this:</p>
  
  <pre><code>$('#clickme').click(function() {
    $('#book').animate({
      filter: 'none'
    }, 5000, function() {
      // Animation complete.
    });
  });
  </code></pre>
  
  <p>But I am getting MAJOR syntax errors while trying to animate <code>-webkit-filter</code> from <code>grayscale(1);</code> to <code>grayscale(0);</code></p>
  
  <p>Thanks guys! Let me know if there's anything else you need. </p>
  
  <hr>
  
  <p>So here's what I have now....</p>
  
  <pre><code>$(function() {
      $("div.cell").focus(function(){
          alert('WHOA');
          $("div.cell").attr('grayNow');
      });
  });​
  </code></pre>
  
  <p>and its not working still...</p>
  
  <p>along with some css</p>
  
  <pre><code>.grayNow {
      -webkit-filter: grayscale(0); 
      filter: none;  
  }​
  </code></pre>
  
  <p>I'm not even getting the alert! :(</p>