小编use*_*309的帖子

带动画的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);
        }
Run Code Online (Sandbox Code Playgroud)

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

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

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

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

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

javascript jquery grayscale jquery-animate

6
推荐指数
2
解决办法
1万
查看次数

标签 统计

grayscale ×1

javascript ×1

jquery ×1

jquery-animate ×1