I discussed how to use jQuery to change the z-index of div layer in previous post. Actually we can do some interesting jQuery animation effect by changing the z-index of div layers.
Here’s the final jQuery animation effect:
Sometimes we want to use a div layer to cover a page while updating the contents, for example, prevent the visitors click on a button, prevent visitors enter text on fields, etc…
In the above example, I use a div layer with semi-transparency and a progress bar to cover the curtain while it is animating. A more realistic example should cover the button to prevent user clicking again while the curtain is animating.
The complete jQuery codes are:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Fun with Animating 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 = $("#picture2").outerWidth(); $(".slideRight").click(function() { // Move the picture Div layer up to cover the curtain Div layer // by changing the z-index smaller than curtain. $("#picture2").css( 'z-index', 5 ); // Animate the curtain $("#picture2") .animate({ "left": "+=" + 100 + "px" }, 5000) .animate({ "left": "-=" + 100 + "px" }, 5000, function() { // Move the picture Div layer back to behind the curtain Div layer // by changing the z-index larger than curtain // when the animation is finished $("#picture2").css( 'z-index', 20 ); } ); }); }); </script> </head> <body> <h1>jQuery Fun with Animating Div Layer Z-index</h1> <div id="frame"> <div id="pageContent2"></div> <div id="picture2"></div> </div> <div style="width:282px; text-align: center; margin-bottom:10px;"> <input type="button" value="Move Curtain Right and Left" /> </div> <div style="width:282px; text-align: center"></div> </body> </html>
Hope you enjoy this jQuery animating z-index of div layer.
Leave a Reply