带动画的 CSS 灰度答案

【问题标题】：CSS grayscale with animation带动画的 CSS 灰度
【发布时间】：2012-09-03 09:40:54
【问题描述】：

我有一些 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'%)'中多余的引号

标签： javascript jquery jquery-animate grayscale

【解决方案1】：

为什么要使用 animate() 呢？您已经只为 webkit 制作动画，那么为什么不使用转换属性和类来触发动画呢？像这样：

img {
  -webkit-transition: all 300ms;
}

img.grayscale {
  -webkit-filter: grayscale(1);
}

然后通过调用删除类

$('img.grayscale').removeClass('grayscale');

注意：我不知道仅对灰度进行动画处理的具体属性是什么，但如果您没有对元素进行任何其他转换，则转换“全部”就可以了。

【讨论】：

好吧，我正在尝试为每个浏览器制作动画，但我正在 chrome 上测试 animate() 函数，因为我使用 chrome 进行测试。我想如果我可以定位一个属性，那么定位另一个属性会很容易:)
截至今天，FF 35 实现了过滤器，现在这是正确的答案，应该被接受

【解决方案2】：

你可以使用我的傻函数。但它有效:)

HTML;

<img src ="http://upload.wikimedia.org/wikipedia/en/6/62/American_McGee_Alice_box.gif" border="0" class="ongray" />

CSS;

img {-webkit-transition:-webkit-filter 0.3s ease-in-out;}
.g {-webkit-filter: grayscale(1);}

JS;

$(".ongray").hover(
    function(){$(this).addClass("g")},
    function(){$(this).removeClass("g");}
);

http://jsfiddle.net/kEC92/3/

【讨论】：

【解决方案3】：

像这样编辑

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

【讨论】：

<script type="text/javascript"> $(".grayscale").hover( function () { $(this).animate($(this).css("-webkit-filter" , "grayscale(0%)"), 1000); } ); </script> 有了这个改变，但不是动画:(
$(this).css( "-webkit-transition" , "1000ms" ); $(this).css("-webkit-filter" , "grayscale(100%)");这也会制作动画:-)

【解决方案4】：

您还可以使用 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;">

【讨论】：

【解决方案5】：

.grayscale{
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);   }

.grayscale:hover{
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);   }

【讨论】：