jQuery 1.4 Animation Techniques - Index of

Extended Animations with jQuery UI
Time for action – clipping an element in and out
This effect is billed as being similar to what happens to the picture when an old television set
is turned off, so let's work that into our example.
1. Add the following elements to the of the template file:
2. Then use the following simple script at the bottom of the page:
$("#tv").click(function() {
$("#static").effect("clip");
});
3. Save this file as clip.html. The stylesheet for this example is as follows:
#tv {
width:300px; height:269px; position:relative; cursor:pointer;
background:url(../img/tv.png) no-repeat 0 0;
}
#bg {
width:220px; height:180px; position:absolute; left:42px;
top:30px;
z-index:-2; background-color:#000;
}
#static {
width:216px; height:178px; position:absolute; left:44px;
top:31px;
z-index:-1; background:url(../img/static.gif) no-repeat 0 0;
}
4. Save this file in the css folder as clip.css.
5. When the page is run, we should be able to click anywhere on the television and see
the effect run:
[ 158 ]