In this example, we'll apply the fold effect to a simple image of a piece of paper.
All we need is an image; add the following code to the
<body>element of the template file:<img src="img/paper.jpg" alt="A piece of paper">
Next, add the following simple script to the bottom of the page, in the empty function as with previous examples:
$("img").click(function() { $(this).effect("fold", { size: "50%" }, 1000); });Save this file as
fold.html.This is another example that we don't need a stylesheet for. When the image is clicked, it should fold up and disappear:
In the previous screenshots, we see the image first as it starts out, then when the effect has hidden the bottom half of the image, and finally, as the top half of the image is being hidden. Notice that the target element is clipped and not resized.