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

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/

Answer 2

你不需要javascript：

img.grayscale{-webkit-transition: all 0.2s ease;}
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=\'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 */
}

希望有帮助