Toggle Desaturation on image onClick in css/javascript

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»), и он все еще не работал. мой вопрос в основном заключается в том, как заменить mouseenter и mouseleave на onClick, чтобы изображение обесцветило onClick, затем снова насыщалось onClick. Heres мой код переключения, который я положил вместо двух, если выше, просто incase.

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

Так что мой вопрос будет, как это сделать oncick?

Я пробовал img.desaturate: active {}, но это не сработало?

EDIT: Я попробовал это и подумал, что что-то в этих строках - это то, что мне нужно, но я уверен, что синтаксис неверен, помогите?

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