Jquery 在颜色和黑白图像之间淡入淡出

Question

我正在尝试悬停以将彩色图像淡化为黑白图像。所以我想做的是使用 JqueryUI switchClass 并在两个类之间淡入淡出

这是我的 CSS:

 img.grayscale {
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter     id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter>    </svg>#grayscale"); /* Firefox 10+, Firefox on Android */
 filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
 }

这是使图像变成黑白的类

我这里有一张图片:

<div class="thumbnail">
    <img  src="/images/colored.jpg" class="img"/>
   </div> 

我的 Jquery 代码是:

 $('.thumbnail').mouseover(function(){
$('.img').switchClass( "img", "grayscale", 1000, "easeOutBounce" )
  });
 $('.thumbnail').mouseout(function(){
$('.img').switchClass( "grayscale", "img", 1000, "easeInOutQuad" )
 });

它不起作用，淡入淡出不流畅，有人可以帮助我吗？

谢谢

Answer 1

您不需要为此使用 jquery。你可以使用 css。

img.grayscale{ 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  /* For Webkit browsers */
    filter: gray;  /* For IE 6 - 9 */
    -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
}
img.grayscale:hover{ 
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
}

这里应该是你的 html 标签

<div class="thumbnail">
    <img  src="/images/colored.jpg" class="img grayscale"/>
</div> 

这个解决方案非常简单，我发现它可以有效地跨多个浏览器使用。它只是在 css 中使用 :hover 和 filter 来避免所有 jquery 的东西。

来源:http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/