带动画的CSS灰度

我有一些css将我的图像更改为灰度（有一些svg for 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); } 

但现在我希望hover动画以将灰度值更改为0。

我有这个代码，但它没有做任何事情（当然在chrome上），我不知道为什么它根本没有动画。

  $(".grayscale").hover( function () { $(this).animate({ '-webkit-filter': 'grayscale('0'%)' }, 300); } );  

我认为可以将％从100％设为0％，不是吗？

编辑：我正在尝试为所有浏览器做，不仅是铬，但我在chrome上进行测试，这就是为什么我没有改变所有属性。 我想当我找到chrome的答案时，我可以为其他浏览器做同样的事:)

Answer 1

为什么要使用animate（）？ 您已经只是为webkit制作动画，那么为什么不使用过渡属性和类来触发动画？ 像这样：

 img { -webkit-transition: all 300ms; } img.grayscale { -webkit-filter: grayscale(1); } 

然后通过调用删除该类

$（ ‘img.grayscale’）removeClass（ ‘灰度’）。

注意：我不知道仅仅为灰度设置动画的具体属性是什么，但是如果你没有对元素进行任何其他转换，那么转换“all”就可以了。

Answer 2

你可以使用我的傻function。 但它的工作原理:)

HTML;

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 3

像这样编辑

Answer 4

您还可以使用onmouseover和onmouseout设置内联css

Answer 5

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