escala de grises con la animación CSS

Question

tengo algo de CSS para cambiar mi imagen en escala de grises (con un poco de SVG para Firefox)

img.grayscale{ 
      filter: grayscale(100%); 
      -webkit-filter: grayscale(100%); 
      -moz-filter: grayscale(100%); 
      -ms-filter: grayscale(100%); 
      -o-filter: grayscale(100%); 
      filter: url(desaturate.svg#greyscale); 
      filter: gray; 
      -webkit-filter: grayscale(1); 
     } 

pero ahora quiero animación en vuelo estacionario para cambiar el valor de la escala de grises a 0.

Tengo este código pero no hace nada (en Chrome, por supuesto), no tengo idea de por qué no anima en absoluto.

<script type="text/javascript"> 
     $(".grayscale").hover(
      function() { 
       $(this).animate({ 
        '-webkit-filter': 'grayscale('0'%)' 
       }, 300); 
      } 
     ); 
    </script> 

Creo que es posible animar el% de 100% a 0%, ¿no?

Edit: Estoy tratando de hacer para todos los navegadores, no solo Chrome, sino que hago mis pruebas en Chrome, es por eso que no estoy cambiando todas las propiedades. Creo que cuando voy a encontrado la respuesta para el cromo voy a hacer lo mismo para los otros navegadores :)

Answer 1

Editar como esto

<script type="text/javascript"> 
    $(".grayscale").hover(
     function() { 
      $(this).animate($(this).css("-webkit-filter" , "grayscale('0'%)"), 300); 
     } 
    ); 
</script> 

Answer 2

¿Por qué utilizar animado() en absoluto? Ya estás animando para webkit, ¿por qué no utilizar la propiedad y las clases de transición para activar la animación? De esta manera:.

img { 
    -webkit-transition: all 300ms; 
} 

img.grayscale { 
    -webkit-filter: grayscale(1); 
} 

Y luego simplemente quitar la clase llamando

$ ('img.grayscale') removeClass ('escala de grises');

Nota: No sé cuál es la propiedad específica para simplemente animar solo la escala de grises, pero si no está haciendo ninguna otra transición en el elemento, la transición de "todo" funciona bien.

Answer 3

También puede establecer CSS en línea usando onmouseover y onmouseout

<img src="image.jpg" onmouseover="$(this).css('-webkit-filter','grayscale(100%)')" onmouseout="$(this).css('-webkit-filter','grayscale(0%)')" style="-webkit-transition:1000ms;"> 

Answer 4

Es posible utilizar mi función tonta. Pero funciona :)

HTML;

<img src ="http://upload.wikimedia.org/wikipedia/en/6/62/American_McGee_Alice_box.gif" border="0" class="ongray" /> 

CSS;

img {-webkit-transition:-webkit-filter 0.3s ease-in-out;} 
.g {-webkit-filter: grayscale(1);} 

JS;

$(".ongray").hover(
    function(){$(this).addClass("g")}, 
    function(){$(this).removeClass("g");} 
); 

http://jsfiddle.net/kEC92/3/

Answer 5

.grayscale{ 
     filter: grayscale(0%); 
     -webkit-filter: grayscale(0%); } 

.grayscale:hover{ 
      filter: grayscale(100%); 
      -webkit-filter: grayscale(100%); }