jQuery 1.4 Animation Techniques - Index of

Sliding Animations
What just happened?
We added a new click-handler in much the same way as we did before, including cancelling
the default behavior of the browser using the event object (e). In this example, we don't
particularly need to do this because the login form is at the very top of the page, so the
visitor won't have scrolled down the page at all and there won't be a jump to the top of the
page when either the Login or Cancel links are clicked. However, I have included it here as it
is good practice.
We then find the closest parent of the link that is a and call the slideUp() method
on it. This time we also supply a callback function, which is used to remove the on class from
the Login link.
You should notice that the Cancel link does not behave like the other elements in the form
while the form is sliding open or closed. The link is visible all the time and moves with the
bottom of the form as it grows or shrinks (depending on whether the form is opening or
closing). The reason for this is simple—it's because the Cancel link is positioned absolutely.
We've specifically added the CSS that causes the Cancel link to behave in this way, even
though it is generally undesirable, as a reminder that CSS can often cause issues when
combined with animations.
Pop quiz – sliding elements up
1. What is the only requirement for an element to have the slideUp() method called
on it?
a. It should be set to visibility:visible;
b. It should contain a wrapper element
c. It should have a minimum height of 100 pixels
d. It should be an element with a display type that naturally renders it visible
on the page
Have a go hero – fixing the Cancel link
Have a go at fixing the Cancel link so that it is only visible while the form is fully open.
The change is simple and requires just a few tweaks to the CSS.
[ 82 ]