在css / javascript中单击切换图像上的饱和度 [英] Toggle Desaturation on image onClick in css / javascript

问题描述

每个函数都有更多的代码，但是这些是对我的问题很重要的主线。我相信...这是一个家伙库，基本上使图像去饱和。

There is more code to each function, but these are the main lines that matter in regards to my question I believe...This is from a guys library to desaturate an image on rollover basically.

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

How do I change it to on click, rather than on mouseover / rollover? Here's his code...

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，上面的，只是incase。

I've already tried changing both if statements to a jquery toggle as well as changing the top line from .bind("mouseenter mouseleave", desevent) ... to .bind("toggle", desevent) and it still didnt work. my question is basically how to substitute mouseenter and mouseleave to onClick so the image desaturates onClick then saturates again onClick. Heres my toggle code that I put in instead of the two if's above, just incase.

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

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

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

另外，在一个相关的注释，你能用css3吗？
这里是使用css3去饱和图像的代码...

Also, on a related note, could you do this with css3? here's the code to desaturate an image with 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);
}

所以我的问题是如何做它oncick？

So my question would be how to do it oncick?

我试过img.desaturate：active {}但是没有工作？

I tried img.desaturate:active{} but it didn't work?

这个和沿着这些线的东西是我需要的，但确保语法不正确，帮助

I tried this and think something along these lines is what I need but im sure the syntax is not correct, help??

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

推荐答案

添加一个特定的类到被点击的元素。

Just add a specific class to the clicked element.

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

这篇关于在css / javascript中单击切换图像上的饱和度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！