I'm looking for a way to get this to work:

When clicking through images on my site, I'd like to have an intermediate image appear (in this case, a graphical shape). This graphical shape should appear fully on-click on top of the 2nd image and then fade out, with the 2nd image fading in. 

Here's a simple visualization:

http://ou812.bplaced.net/jquery/crossfade_cut_into_shape_then_fade_out_shape.gif  

Basically I want a clear cut to another image with that shape on top of that image. Then the shape should fade out. (the .gif doesn't repeat so refresh to watch again)

Alternatively one could have that shape faded in; once the shape is at 100% the image underneath is exchanged; then the shape fades out again:

http://ou812.bplaced.net/jquery/crossfade_in_and_out.gif

Is there an existing plugin that I could amend? I'm afraid my jquery programming skills > 0.