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 <body> of the template file:
    <div id="tv">
  <div id="bg"><!-- --></div>
  <div id="static"><!-- --></div>
</div>
  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; ...

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