我有一些用于将我的图像转换为灰度的CSS代码(在Firefox中使用了一些SVG)
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上测试,所以我没有更改所有属性。我认为当我找到Chrome的答案时,我也可以为其他浏览器做同样的事情 :)
'grayscale('0'%)'
中的额外引号。 - wirey00