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?

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.

Ah cross fade, clever. That solves it.

Cheers!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.