I have 5 images all overlaid on top of each other. I want the each image to jump to the front as invisible and then fade in when the right #bp image is clicked on.

The images jump to the front alright but they're not fading in.

(Also in IE, nothing at all happens).

Please help:

JQUERY:

<script type="text/javascript">

$(function() {

currZIndex = 5;

$("#bp1").click(function() {

$(".img1").css('z-index', currZIndex+1);

currZIndex = currZIndex + 1;

$("#mainImage1").hide();

$("#mainImage1").fadeIn("normal");

});

$("#bp2").click(function() {

$(".img2").css('z-index', currZIndex+1);

currZIndex = currZIndex + 1;

$("#mainImage2").hide();

$("#mainImage2").fadeIn("normal");

});

$("#bp3").click(function() {

$(".img3").css('z-index', currZIndex+1);

currZIndex = currZIndex + 1;

$("#mainImage3").hide();

$("#mainImage3").fadeIn("normal");

});

$("#bp4").click(function() {

$(".img4").css('z-index', currZIndex+1);

currZIndex = currZIndex + 1;

$("#mainImage4").hide();

$("#mainImage4").fadeIn("normal");

});

$("#bp5").click(function() {

$(".img5").css('z-index', currZIndex+1);

currZIndex = currZIndex + 1;

$("#mainImage5").hide();

$("#mainImage5").fadeIn("normal");

});

});

</script>

HTML: