CSS grayscale with animation

≡放荡痞女 提交于 2019-12-22 05:33:29

问题


i have some css for changing my image into grayscale (with some svg for firefox)

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.

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.

<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?

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 :)


回答1:


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:

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

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

And then just remove the class by calling

$('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.




回答2:


You may use my silly function. But it works :)

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:


Edit like this

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



回答4:


You can also set inline css using onmouseover and onmouseout

<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%);   }


来源:https://stackoverflow.com/questions/12353107/css-grayscale-with-animation

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!