jQuery 1.4 Animation Techniques - Index of

Custom Animations
Animating an element's size
As I mentioned at the start of the chapter, almost any style property that contains a purely
numeric value may be animated with the animate() method.
We looked at animating an element's position by manipulating its left style property, so
let's move on to look at animating an element's size by manipulating its height and width
style properties.
In this example, we'll create image wrappers that can be used to display larger versions of
any images on the page by manipulating the element's size.
Time for action – creating the underlying page and basic styling
First, we'll create the underlying page on which the example will run.
1. Add the following HTML to the of our template file:
The Article Title
Lorem ipsum
dolor...
Lorem ipsum
dolor...
2. Save the example page as animate-size.html. We'll keep the styling light in this
example; in a new file in your text editor, add the following code:
article {
display:block; width:800px; margin:auto; z-index:0;
font:normal 18px "Nimbus Sans L", "Helvetica Neue", "Franklin
Gothic Medium", sans-serif;
}
article p {
margin:0 0 20px; width:800px; font:15px Verdana, sans-serif;
line-height:20px;
}
article p #image2-thumb { float:right; margin:6px 0 0 30px; }
img.expander { margin:6px 30px 1px 0; float:left; }
.expander-wrapper { position:absolute; z-index:999; }
.expander-wrapper img {
cursor:pointer; margin:0; position:absolute;
}
.expander-wrapper .expanded { z-index:9999; }
3. Save this file as animate-size.css in the css folder.
[ 114 ]