jQuery help please!

Hi,


I'm relatively new to jQuery. What I am trying to achieve is something similar to the image masking effect seen on http://www.studiojuice.com/. Obviously I don't want to just copy & paste the code so I've been trying to develop my own code to mimic this effect.

Saying that however it doesn't seem to register the fact that the image has loaded properly, and sometimes fails to fade out the grey box from on top of the image. I'd appreciate it if someone could give me some insight as to why this is happening!

HTML Snippet

<div class="mask"><img src="../images/portfolio/football_betting_news.jpg" width="640px" height="360px" alt="Football Betting News" title="Football Betting News" /></div> 

HTML:

CSS

div.mask{
	position: relative;
}
div.mask_inner{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #555;
}

Code (markup):

jQuery

$(function(){
		$('div.mask').each(function(){
			var this_img = $(this).find('img');
			$(this).prepend("<div class='mask_inner'></div>");
			$('div.mask_inner', this).css({height: $('img', this).height()});
		});		
		$('div.mask img').each(function(){
			$(this).bind('load readystatechange', function(){
				$(this).closest('div.mask').find('div.mask_inner').fadeOut(1000);
			}).bind('error', function(){
				$(this).closest('div.mask').find('div.mask_inner').fadeOut(1000);
			});
			this.src = this.src;
		});
});

Code (markup):

As I said before, please keep in mind I am quite new to jQuery. Any help would be very much appreciated!


Hodge