在css/javascript中单击图像时切换去饱和

每个函数都有更多的代码，但我相信这些是关于我的问题的主线…这是从一个guys库来的，基本上是在翻滚时对图像进行去饱和

如何将其更改为单击，而不是鼠标悬停/滚动？这是他的密码

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）更改。。。绑定（“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;
    }
  }

---

只需向单击的元素添加一个特定的类

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

---

使用javascript库，而不是使用javascript库。感谢该库看起来不错。“去饱和”按钮可以工作，但我不知道如何让它一次又一次地饱和…它不一定是：激活的，不是。激活的？我已经试过了，但是不起作用。这可能是因为你的CSS中有一些不正确的行。只需在一个浏览器中尝试，当它工作时，开始添加其他样式。