0

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?

2
Contributors
2
Replies
11
Views
1 Year
Discussion Span
Last Post by James_43
0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.