$(document).ready(function() {
	$('#content img').hover(function() {
		grayscale( $(this) );
	}, function() {
		grayscale.reset( $(this) );
	});
	grayscale.prepare( $('#content img') );
});

@The Mafalian – Agreed on that, it leaks like a sinking ship… Safari 4 seems to handle the memory better, but fails when I apply the function on load. But if I use it in $().hover it works.

Anyway, I knew it could be done via the canvas, but you’ve gone ahead and done the hard work of putting down exactly how that’s done.

Bottom line: impressed. Nice one.

I should add, I was going to use the effect on jQuery for Designers, for when the user was watching the video, they could click “lights off” and it would greyscale the entire background (probably layering over a big opacity: 60 div) letting the user focus on the video.

@Thomas, thanks for the explanation; I didn’t originally understand the reason behind those different figures, it makes sense now! Also, that’s some really cool work with the anaglyph generator!

@Mafalian, I’m afraid that’s to be expected; processing images using canvas takes quite a lot of memory + processing time.

If you want to know why the conversion numbers are used its because your eye is much more sensitive to green than red than blue. Generally accepted values have been calculated by the NTSC (National Television System Committee) as Red: 0.299 Green: 0.587 and Blue: 0.114 but in fact the values will be slightly different depending on the screen you are using. It doesn’t really matter that much.

I’ve also found the canvas tool to be incredibly useful. I’ve used it to generate the mandelbrot set and to create anaglyphs.