javascript - jQuery .fadeOut() blocking div under -

i checking example of slideshow , found strange behavior.

i using code image under not show until above 1 done fading out. why? expected image #above fade out image #under.

(note #above has z-index:10;)

<div id="current_image">     <img width="370" id="above" src="...     <img width="370" id="under" src="... </div> 

jquery

$(document).ready(function () {     $(".small_image").click(function () {         event.preventdefault();         var image = $(this).prop("rel");         var above = $('#above');         var under = $('#under');         under.prop('src', image);         above.fadeout(1000, function () {             above.prop('src', under.prop('src')).css('display', 'block');         });     }); }); 

fiddle

the problem 2 images in #current_image div not on top of 1 another, 1 image vertically above other image (the images not stacked).

http://jsfiddle.net/cvntg/2/

so, need alter css:

#current_image {     width:370px;     height:245px;     float:left;     overflow:hidden;     position: relative; } #current_image img {     min-height:100%;     position: absolute;     top: 0;     left: 0; } 

now images absolutely aligned, , they're on top of 1 another. 1 fades out, other 1 showing behind it. if had inspected html/css firebug, have seen this.

i consider rewriting javascript portion of this. don't need change src , that. assign #above , #below id's needed, , make sure #above has higher z-index (or really, need add/remove #above id).