6

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

4

5 回答 5

11

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

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

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

然后只需通过调用删除类

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

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

于 2012-09-10T14:01:42.453 回答
1

您可以使用我的愚蠢功能。但它有效:)

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/

于 2013-03-05T08:42:58.160 回答
0

像这样编辑

<script type="text/javascript">
    $(".grayscale").hover(
        function () {
            $(this).animate($(this).css("-webkit-filter" , "grayscale('0'%)"), 300);
        }
    );
</script>
于 2012-09-10T13:53:29.513 回答
0 
.grayscale{
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);   }

.grayscale:hover{
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);   }
于 2013-09-27T16:39:58.563 回答
0

您还可以使用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;">
于 2012-09-10T14:15:17.670 回答