Javascript fade in + zindex

[James_43]

Hi all, I have two square <div> containers one under the other. When I click a button, I would like the second <div> to fade on top. Because the top <div> is transparent, the bottom <div> needs to be hidden first.

I have given the second div a Z-index of 2 and the first div has a z-index of 1. Here is the problem, when I call the fadeIn function, the bottom <div> SNAPS to the front, then dissapears before fading in as you would expect.

So far I have:

$("#registration-form").hide(); 
$("#register").click(function() { 
$("#registration-form").fadeIn();
}); 

Is there some way to make this work?

[ryantroop]

Yeah. Don't use z-index. Instead, just do the opacity shift on both elements. The only way to make this work, though, is to make sure they are absolutely positioned, one on top of the other.

[James_43]

Ah cross fade, clever. That solves it.

Cheers!