jQuery 1.4 Animation Techniques - Index of

The previous screenshot shows how the hover-state is applied to one of the menu items
over a short period of time, instead of instantly, as it would normally be with pure CSS,
The animation proceeds from top to bottom in the previous picture.
Time for action – adding the underlying markup and styling
To begin with, we need to create the elements that will be used by the example and the
styling to set their visual appearance.
[ 23 ]
Chapter 2
1. Add the following underlying markup for our navigation menu to the template file
we created in Chapter 1, Introduction:
Home
Articles
Code
Demos
Portfolio
2. Save the page in the jquery-animation directory as fadeIn.html.
3. We'll also need to link to a custom stylesheet for this example. Add the following
code to the of the page:
4. Next we should create the stylesheet we just linked to. In a new file, add the
following code:
body { text-align:center; }
nav {
display:inline-block;
font:normal 18px "Nimbus Sans L", "Helvetica Neue", "Franklin
Gothic Medium", Sans-serif; border:2px solid #aaa; -moz-border-
radius:7px; -webkit-border-radius:7px; border-radius:7px;
}
nav ul { list-style-type:none; padding:0; margin:0; }
nav li { float:left; border-right:2px solid #aaa; }
nav a {
display:block; padding:10px 20px; position:relative; color:#333;