CSS灰度动画

Question

我有一些用于将我的图像转换为灰度的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的答案时，我也可以为其他浏览器做同样的事情 :)

- user1660309

---

尝试删除'grayscale('0'%)'中的额外引号。 - wirey00

Answer 1

为什么要使用animate()？既然已经只为webkit添加动画效果了，为什么不使用transition属性和类来触发动画呢？像这样：

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

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

然后通过调用

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

来移除类。注意：我不知道仅对灰度进行动画处理的具体属性是什么，但如果您不对元素执行任何其他转换，则转换“全部”就可以正常工作。

- wavetree

---

我正在尝试为每个浏览器制作动画，但我正在Chrome上测试animate()函数，因为我在测试中使用Chrome。我认为如果我可以针对一个属性进行定位，那么针对另一个属性也会很容易 :) - user1660309

截至今天，FF 35已经实现了过滤器，现在这是正确的答案，应该被接受。 - Aamir Mahmood

Answer 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/

- siniradam

Answer 3

像这样编辑

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

- GautamD31

---

<script type="text/javascript"> $(".grayscale").hover( function () { $(this).animate($(this).css("-webkit-filter" , "grayscale(0%)"), 1000); } ); </script> 使用这段代码可以实现变化，但是没有动画效果 :( - user1660309

$(this).css("-webkit-transition", "1000毫秒"); $(this).css("-webkit-filter", "灰度(100%)"); 这将使动画也太棒了 :-) - Fappie.

Answer 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;">

- Sunil Dodiya

Answer 5

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

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

- cha gavara