javascript 带动画的 CSS 灰度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12353107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS grayscale with animation
提问by user1660309
i have some css for changing my image into grayscale (with some svg for firefox)
我有一些 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);
}
but now i want animation on hover for changing the value of the grayscale to 0.
但现在我想要悬停动画以将灰度值更改为 0。
I have this code but it doesn't do anything (on chrome of course), i have no idea why it doesn't animate at all.
我有这段代码，但它没有做任何事情（当然是在 chrome 上），我不知道为什么它根本没有动画。
<script type="text/javascript">
$(".grayscale").hover(
function () {
$(this).animate({
'-webkit-filter': 'grayscale('0'%)'
}, 300);
}
);
</script>
I think it's possible to animate the % from 100% to 0%, isn't it?
我认为可以将 % 从 100% 动画化到 0%，不是吗？
Edit : i'm trying to do for all browsers, not only chrome but i do my tests on chrome that's why i'm not changing all the properties. I think when i'll found the answer for chrome i'll can do the same for the other browers :)
编辑：我正在尝试为所有浏览器执行此操作，不仅是 chrome，而且我在 chrome 上进行测试，这就是为什么我不更改所有属性的原因。我想当我找到 chrome 的答案时，我会为其他浏览器做同样的事情:)
回答by wavetree
Why use animate() at all? You're already only animating for webkit, so why not use the transition property and classes to trigger the animation? Like this:
为什么要使用 animate() 呢？您已经只是为 webkit 制作动画，那么为什么不使用 transition 属性和类来触发动画呢？像这样：
img {
-webkit-transition: all 300ms;
}
img.grayscale {
-webkit-filter: grayscale(1);
}
And then just remove the class by calling
然后只需通过调用删除类
$('img.grayscale').removeClass('grayscale');
$('img.grayscale').removeClass('grayscale');
Note: I don't know what the specific property is to just animate just the grayscale, but if you're not doing any other transitions on the element, transitioning "all" works just fine.
注意：我不知道只为灰度设置动画的特定属性是什么，但是如果您不在元素上进行任何其他转换，则转换“全部”效果很好。
回答by siniradam
You may use my silly function. But it works :)
你可以使用我的愚蠢功能。但它有效:)
HTML;
HTML;
<img src ="http://upload.wikimedia.org/wikipedia/en/6/62/American_McGee_Alice_box.gif" border="0" class="ongray" />
CSS;
CSS;
img {-webkit-transition:-webkit-filter 0.3s ease-in-out;}
.g {-webkit-filter: grayscale(1);}
JS;
JS;
$(".ongray").hover(
function(){$(this).addClass("g")},
function(){$(this).removeClass("g");}
);
回答by cha gavara
.grayscale{
filter: grayscale(0%);
-webkit-filter: grayscale(0%); }
.grayscale:hover{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); }
回答by Gautam3164
Edit like this
像这样编辑
<script type="text/javascript">
$(".grayscale").hover(
function () {
$(this).animate($(this).css("-webkit-filter" , "grayscale('0'%)"), 300);
}
);
</script>
回答by JDev
You can also set inline css using onmouseoverand onmouseout
您还可以使用onmouseover和onmouseout设置内联 css
<img src="image.jpg" onmouseover="$(this).css('-webkit-filter','grayscale(100%)')" onmouseout="$(this).css('-webkit-filter','grayscale(0%)')" style="-webkit-transition:1000ms;">
