jquery css(filter_'gray'),css - filter:grayscale(0) animation with jQuery - Stack Overflow

There is no animate in jQuery for filter grayscale yet. You can wait until it comes or use this script (only javascript, no JQuery):

function grayscale(div,millisec,bool){

if (bool){ /* We want to become grayscale */

var i = 0;

timertogray = setInterval(function addgray(){

if (i < 101){

document.getElementById(div).style.filter = "grayscale(" + i + "%)";

i = i + 10;

}else{

clearinterval(timertogray); /* once the grayscale is 100%, we stop timer */

}

}, millisec);

}else{ /* We want to give color back */

var i = 100;

timerfromgray = setInterval(function addgray(){

if (i > 0){

document.getElementById(div).style.filter = "grayscale(" + i + "%)";

i = i - 10;

}else{

clearinterval(timerfromgray); /* once the grayscale is 0%, we stop timer */

}

}, millisec);

}

}

And call it with :

grayscale('Content',100,true); /* Activate grayscale */

grayscale('Content',100,false); /* Give color back */