在 css / javascript 中切换图像 onClick 的去饱和度

Question

每个函数都有更多代码，但这些是我认为与我的问题有关的主要行...这是来自一个家伙库，用于在翻转时对图像进行去饱和处理。

如何将其更改为单击而不是鼠标悬停/鼠标悬停？这是他的代码...

jQuery(function($){
$cloned.closest(".DesaturateDiv").bind("mouseenter mouseleave",desevent);
}

  function desevent(event) 
  {
    if (event.type == 'mouseenter')
         $(".des.color", this).fadeOut(275);

    if (event.type == 'mouseleave')
        $(".des.color", this).fadeIn(200);
  }

我已经尝试将 if 语句更改为 jquery 切换以及将顶行从 .bind("mouseenter mouseleave", desevent) ... 更改为 .bind("toggle", desevent) 并且它仍然没用。我的问题基本上是如何将 mouseenter 和 mouseleave 替换为 onClick，以便图像在 onClick 上去饱和，然后在 onClick 上再次饱和。这是我输入的切换代码，而不是上面的两个 if，只是以防万一。

$('.DesaturateDiv').toggle(function() {

$(".des.color", this).fadeOut(275);

}, function() {
$(".des.color", this).fadeIn(200);
});

另外，在相关说明中，您可以使用 css3 执行此操作吗？ 这是使用 css3 去饱和图像的代码...

 img.desaturate{
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);
}

所以我的问题是如何做到这一点？

我尝试了 img.desaturate:active{} 但没有成功？

编辑：我试过这个并认为这些方面的东西是我需要的，但我确定语法不正确，帮助？？

 function desevent(event) 
  {
    i = 0;

    if( i = 0 ){
    if (event.type == 'mousedown')
         $(".des.color", this).fadeOut(275);
         i = 1;
    }

    if( i = 1 ){
    if (event.type == 'mousedown')
        $(".des.color", this).fadeIn(200);
                     i = 0;
    }
  }

Answer 1

只需为点击的元素添加一个特定的类。

.desaturate{
    transition-duration: 400ms; //and other prefixes
}
.desaturate.active{
    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);
}