jQuery 1.4 Animation Techniques - Index of

Custom Animations
New methods and functions should always end in a semi-colon (;) to preserve
functionality when the plugin is compressed
Inside methods, the this keyword always refers to the current selection of
elements, and methods should always return this to preserve chaining
Always attach new methods and functions to the jQuery object as opposed to the $
alias, unless using an anonymous function with an aliased $ object
In this section, we'll create a plugin which can be used to create advanced transition effects
when showing a series of images. The finished widget will be similar in some respects to the
image viewer we created earlier, but will not animate the images themselves. Instead, it will
apply transition effects between showing them.
Time for action – creating a test page and adding some styling
Once again we'll create the example page and basic styling first and add the script last.
1. The underlying HTML for this example is very light. All we need in the of our
template file are the following elements:
2. Save this page as advanced-transitions.html.
3. Like the markup, the CSS we rely on for a plugin should also be as minimal as
possible. Luckily not much CSS is required for our small collection of elements.
4. Add the following code to a new file in your text editor:
#frame { position:relative; width:520px; height:400px; z-index:0;
}
#frame img { position:absolute; top:0; left:0; z-index:1; }
#frame img.visible { z-index:2; }
#frame a {
display:block; width:50%; height:100%; position:absolute; top:0;
z-index:10; color:transparent;
background-image:url(transparent.gif); filter:alpha(
opacity = 0);
[ 122 ]