Color Image change to Black and white

JAVSSCRIPT
-------------
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<ul class="imglist">
<li><a href="#"><img src="images/color1.jpg" ></a></li>
<li><a href="#"><img src="images/color2.jpg" ></a></li>
<li><a href="#"><img src="images/color3.jpg" ></a></li>
</ul>

<script>
$(window).load(function() {
$('.imglist img').each(function() {
$(this).wrap('<div style="display:inline-block;width:' + this.width + 'px;height:' + this.height + 'px;">').clone().addClass('gotcolors').css({'position': 'absolute', 'opacity' : 0 }).insertBefore(this);
this.src = grayscale(this.src);
}).animate({opacity: 1}, 500);
});
/*
//Demo 1
$(document).ready(function() {
$(".imglist a").hover(
function() {
$(this).find('.gotcolors').stop().animate({opacity: 1}, 200);
},
function() {
$(this).find('.gotcolors').stop().animate({opacity: 0}, 500);
}
);
});


//Demo 2
$(document).ready(function() {
$(".imglist a").hover(
function() {
var nativeImage = new Image();
nativeImage.src = this.getElementsByTagName('img')[0].src;
$(this).find('.gotcolors').stop().css('width', 0).stop().animate({opacity: 1,width: nativeImage.width}, 200);
},
function() {
$(this).find('.gotcolors').animate({opacity: 0}, 500);
}
);
});

//Demo 3
$(document).ready(function() {
$(".imglist a").hover(
function() {
var nativeImage = new Image();
nativeImage.src = this.getElementsByTagName('img')[0].src;
$(this).find('.gotcolors').stop().css({'height': 0,'width': nativeImage.width}).stop().animate({opacity: 1,height: nativeImage.height}, 200);
},
function() {
$(this).find('.gotcolors').animate({opacity: 0}, 500);
}
);
});
*/

$(document).ready(function() {
$(".imglist a").hover(
function() {
var nativeImage = new Image();
nativeImage.src = this.getElementsByTagName('img')[0].src;
$(this).find('.gotcolors').stop().css({'height': 0,'width': nativeImage.width}).stop().animate({opacity: 1,height: nativeImage.height}, 200);
},
function() {
$(this).find('.gotcolors').animate({opacity: 0}, 500);
}
);
});




function grayscale(src) {
var supportsCanvas = !!document.createElement('canvas').getContext;
if (supportsCanvas) {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageData, px, length, i = 0, gray,
img = new Image();

img.src = src;
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0);

imageData = context.getImageData(0, 0, canvas.width, canvas.height);
px = imageData.data;
length = px.length;

for (; i < length; i += 4) {
gray = px[i] * .3 + px[i + 1] * .59 + px[i + 2] * .11;
px[i] = px[i + 1] = px[i + 2] = gray;
}

context.putImageData(imageData, 0, 0);
return canvas.toDataURL();
} else {
return src;
}
}
</script>


-----------------------------------------------------------------------------------------------

CSS
------
<style>
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale:hover{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
</style>
<img src="images/1.jpg" alt="Lena Sderberg" style="width: 512px; height: 512px;" class="grayscale">