我有一些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的答案时我会为其他浏览器做同样的事情:)