We sometimes need to change or animate the z-index of Div layer with jQuery. The main reason may be to move a Div layer behind other Div layer. Changing the z-index of a Div layer is rather simple. The final result is shown as below:
Let’s take a look at the z-index values of the two Div layers:
Z-index of the two Div layers:
- #pageContent – 10
- #picture – 20
As we know, a Div layer with higher z-index on top a Div layer with lower z-index. That’s why we can move a Div layer on top or below another Div layer by changing the z-index.
Here’s the jQuery codes of the above example:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Animate Div Layer Z-index</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $("document").ready(function() { // Get the outer height of #picture Div var widthShift = $("#picture").outerWidth(); $(".slideRight").click(function() { if ( $(this).is(".slideRight") ) { // Move the curtain Div layer behind the picture Div layer // by changing the z-index smaller than picture. $("#picture").css( 'z-index', 5 ); // Toggle the class $(this).toggleClass("slideRight slideLeft") } else { // Move the curtain Div layer above the picture Div layer // by changing the z-index back to 20 (greater than picture). $("#picture").css( 'z-index', 20 ); // Toggle the class $(this).toggleClass("slideRight slideLeft") } }); }); </script> </head> <body> <h1>jQuery Animate Div Layer Z-index</h1> <div id="frame"> <div id="pageContent"></div> <div id="picture"></div> </div> <div style="width:282px; text-align: center; margin-bottom:10px;"> <input type="button" value="Move Curtain to Back/Front" /> </div> <div style="width:282px; text-align: center"></div> </body> </html>
Once we know how to change the z-index of Div layers, interesting animation can be made.
Leave a Reply