jQuery 1.4 Animation Techniques - Index of

Custom Animations
Time for action – creating an animated content viewer
We'll start again by adding the underlying markup and styling.
1. The underlying markup for the content viewer should be as follows:
«
Image
1
Image 2
Image 3
Image 4
Image 5
»
2. Save the file as animate-position.html.
3. Next we should create the base CSS. By that I mean that we should add the CSS
which is essential for the content-viewer to function as intended, as opposed to
styling that gives the widget a theme or skin. It's good practice to separate out
the styling in this way when creating plugins so that the widget is compatible with
jQuery UI's Themeroller theming mechanism.
4. In a new file in your text editor add the following code:
#slider { width:500px; position:relative; }
#viewer {
width:400px; height:300px; margin:auto; position:relative;
overflow:hidden;
}
#slider ul {
[ 104 ]