jQuery 1.4 Animation Techniques - Index of

Extended Animations with jQuery UI
The fold effect
The fold effect simulates something being folded in half along one axis and then folded in
half along the other axis. Of course, the element isn't actually folded in the 3D sense, first
one side of the element moves up a specified amount, then another side is moved in and
the element disappears.
By default the effect uses the hide mode so it will automatically be hidden at the end of the
animation. The element being folded is not scaled; it is clipped instead so images and text
will not squash up as the effect runs.
Configuration options
The fold effect exposes three configurable options which are shown in the following table:
Option Default Usage
horizFirst false Sets whether the element is clipped along the horizontal axis first
or not.
mode "hide" Sets whether the element is shown or hidden when used with the
effect() method. Other values may include show, effect,
or toggle.
Size 15 This sets the distance of the first fold in pixels and can take either
an integer, or a string specifying a value, such as a percentage.
Time for action – folding an element away
In this example, we'll apply the effect to a simple image of a piece of paper.
1. All we need is an image; add the following code to the of the template file:
2. 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);
});
3. Save this file as fold.html.
[ 164 ]