jQuery 1.4 Animation Techniques - Index of

Fading Animations
In the previous screenshot, we see our help text gradually fading into view. Once the icon is
clicked a second time, the animation will be shown in reverse, with the element going from
full opacity to full transparency.
Pop quiz – using fadeToggle()
1. Why should we use caution when using fadeToggle()?
a. Because elements still affect the flow of the page once they have been
faded out
b. Because of the black border problem in Internet Explorer
c. Because the natural display style of an element is not always maintained,
so inline elements will be set to display:block when they are faded in
d. Because the method does not check the current state of the element it is
called on
Have a go hero – extending fadeToggle()
In this example we faded an element that has an alpha-transparent PNG as its background
image. This means that the page will suffer from the black border problem in all current
versions of IE. Have a go at using one of the fixes described earlier in the chapter to fix
the problem.
Greater opacity control with fadeTo()
With the fadeTo() method we can use the same arguments as before, but we can also
control the final opacity of the element that is being animated. This is very useful for
situations where we don't want to fade an element all the way in or out.
Unlike the fadeIn() or fadeOut() methods, the fadeTo() method must be supplied
with both a duration and an ending opacity at least. The duration argument accepts the
same values as with the fadeIn(), fadeToggle(), and fadeOut() methods.
The ending opacity is provided as the second argument and should be a decimal number
between the integers 0 and 1, which represents the percentage of opacity, with 0 being fully
transparent, and 1 being fully opaque. 50% opacity is therefore specified as 0.5.
If easing is required, this should be provided as the third argument and can take the strings
swing (the default) or linear, like the other methods we have looked at so far. A callback
function to be executed for each selected element may also be supplied.
[ 36 ]