jQuery 1.4 Animation Techniques - Index of

[ 47 ]
Chapter 2
Usually these methods do not take any arguments, but we can trigger an animation by
supplying an additional argument which represents either the duration, or the easing of the
animation. We can also add a callback function in keeping with the animation methods we
have looked at so far.
The methods can take the following format:
jQuery(elements).show(duration, [easing], [callback]);
jQuery(elements).hide(duration, [easing], [callback]);
These animations are a step-up in complexity from simple fading because instead of just
animating the opacity of the selected elements, the width and height of the element are
animated too. Syntactically, the methods are very similar however.
This means that the selected elements will grow in size as they appear, or shrink as they
disappear. We have little direct control over this however, and can set only the duration
or easing of the animations.
The direction in which the selected element will grow or shrink can be manipulated
indirectly via CSS however. If the selected element is positioned using its left and top
style properties, the animation will proceed from the top-left corner, growing to the right
and down. If it is positioned using its right and bottom style properties, it will grow up
and to the left instead.
When an animation is not proceeding in the way in which you expect, it is always worth
ruling out any interference from CSS. Styles can affect how an element is animated, so if
you aren't getting errors in the JavaScript console, always check that the CSS isn't the cause
of unexpected behavior. I have lost count of the hours spent checking and rechecking scripts,
only to find that a tiny tweak to the CSS fixes the problem entirely.
Like the fadeIn() method, elements that are to be animated using the show() method
should initially be hidden with display:none. Elements being shown will be set to
display:block, or whatever other display mode is acceptable for the element in question.
Flyout submenus with jQuery's show/hide logic
Let's take a look at a basic example of the show() and hide() methods in action. We'll
create a simple vertical navigation menu which features fly-out submenus that are animated
in and out of view. We'll look at the following aspects of these methods:
How to trigger an animation using the show() or hide() methods