jQuery 1.4 Animation Techniques - Index of

Extended Animations with jQuery UI
Configuration options
The blind effect has the following configuration options:
Option Default Usage
direction "vertical" Sets the axis along which the target element is shown or
hidden.
mode "hide" Sets whether the element is shown or hidden when used with
the effect() method. Other possible values include show,
toggle, and effect.
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 of the template file add the following code:
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 in the css folder.
5. When we run the page in a browser, the blind should alternately roll down and up
each time the window is clicked:
[ 156 ]