带动画的CSS灰度

Question

我有一些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);
        }

但现在我希望悬停动画,将灰度值更改为0.

我有这个代码,但它没有做任何事情(当然在Chrome上),我不知道为什么它根本没有动画.

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

我认为可以将%从100%设为0%,不是吗？

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

Answer 1

为什么要使用animate()？您已经只是为webkit制作动画,那么为什么不使用过渡属性和类来触发动画呢？像这样:

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

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

然后通过调用删除该类

$( 'img.grayscale')removeClass( '灰度').

注意:我不知道具体属性是什么,只是为灰度动画,但如果你没有在元素上做任何其他过渡,转换"所有"工作正常.

Answer 2

像这样编辑

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