作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我有一些 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 的答案时,我会为其他浏览器做同样的事情:)
最佳答案
为什么要使用 animate()?您已经只为 webkit 制作动画,那么为什么不使用过渡属性和类来触发动画呢?像这样:
img {
-webkit-transition: all 300ms;
}
img.grayscale {
-webkit-filter: grayscale(1);
}
然后通过调用
删除类$('img.grayscale').removeClass('grayscale');
注意:我不知道只为灰度设置动画的特定属性是什么,但如果您没有对元素进行任何其他过渡,过渡“全部”就可以正常工作。
关于javascript - 带动画的 CSS 灰度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12353107/
我是一名优秀的程序员,十分优秀!