问题
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