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.