jQuery 1.4 Animation Techniques - Index of

Sliding Animations
The previous picture shows the menu as it opens. The animation proceeds from top to
bottom. Because the slideDown() effect is only applied to elements that are hidden,
clicking the link while the menu is open will not cause the menu to reopen.
What just happened?
We have a relatively straight-forward collection of elements here. The HTML5
element is the natural container for our login elements. The form is part of a simple
unordered-list along with a link that will open the form.
Note that the link that will be used to open the login form has its href attribute set to
a page that contains the login form. This is a simple fallback so that if the visitors have
JavaScript disabled, they can still login even if they don't get to see the slide down form.
A lot of the styling is purely presentational and does not affect how the form functions.
Similarly, a lot of it is standard positional stuff. What's important is that the form is initially
hidden from view with display:none, and that the form is positioned using its top
style property.
We attach a click-handler to the login link, which automatically receives the event object
(e) as an argument. We use this object to cancel the default behavior of the browser. This
prevents the page from jumping to the top when the link is clicked, or following the href
of the link provided in case JavaScript is disabled. The preventDefault() function, which
jQuery normalizes to work in IE as well as standard-compliant browsers, handles this for us.
We then add the class name on to the link so that our :hover styles are persisted when
the pointer moves off the link and the form is still open. We then move to the next element
after the link, our hidden login form, and call the slideDown() method on it with no
additional arguments.
Position is important
The position of an element that has slideDown() applied to it is very
important. The animation will not run correctly if the element uses absolute
positioning in conjunction with its bottom style property to position itself by.
In this situation, the element will appear to slide up from the bottom, instead
of sliding down as intended. We do not see this behavior with relatively
positioned elements however.
[ 78 ]