토글 불포화 이미지 onClick CSS/자바 스크립트

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

이미 변화 시도했습니다입니다 모두 JQuery와 토글에 문뿐만 아니라 .bind에서 맨 윗줄 ("mouseenter하는 MouseLeave", desevent을) ... 변화는 .bind에있는 경우 ("토글", desevent) 그리고 그것은 여전히 ​​작동하지 않았다. 내 질문은 기본적으로 onClick에 mouseenter 및 mouseleave를 대체하는 방법이므로 이미지가 onClick을 채도하면 onClick이 다시 포화 상태가됩니다. 위의 두 가지 경우 대신에 넣은 내 토글 코드를 보여줍니다.

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

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

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

또한 관련 메모에서 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하는 방법이 될 것입니다 ... CSS3로 이미지를 채도하는 코드입니까?

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