Time for action – using the blind effect

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:

  1. In the <body> of the template file add the following code:
    <div id="window">
  <div id="blind"><!-- --></div>
</div>
  2. Implement the effect with the following script:
    $("#window").click(function() {
  $("#blind").toggle("blind");
});
  3. 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%;
}
  4. Save this as blind.css ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial