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 */
 }

这是使图像B＆amp; w ^

我有一张图片：

<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 */
}

希望有所帮助

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

2 个答案: