I mentioned earlier that the effect is reminiscent of a window blind rolling up or down, so let's base our next example on that:
In the
<body>of the template file add the following code:<div id="window"> <div id="blind"><!-- --></div> </div>
Implement the effect with the following script:
$("#window").click(function() { $("#blind").toggle("blind"); });Save this file as
blind.html. The stylesheet for this example is as follows:#window { width:464px; height:429px; position:relative; cursor:pointer; background:url(../img/window.jpg) no-repeat 0 0; } #blind { display:none; width:332px; height:245px; position:absolute; left:64px; top:113px; background:url(../img/blind.png) no-repeat 0 100%; }Save this as
blind.cssin thecssfolder.When we run the page in a browser, the blind should alternately roll down and up each time the window is clicked:
The previous screenshot shows the blind in its fully-open state...
