jQuery 1.4 Animation Techniques - Index of

Fading Animations
What just happened?
The first thing we did was cache a reference to the located inside our element.
We'll be referencing it several times so it is more efficient to only select it from the DOM a
single time. For performance reasons, it is generally best to minimize the number of DOM
operations that are carried out.
We then remove the purecss class from the element so that our standard CSS hover states
are no longer effective. We use JavaScript to do this so the basic hovers still work if JavaScript
is disabled in the browser.
Next we insert a new element into each of the anchors. We'll perform the
animation on each of these elements so that anchors themselves remain clickable
and functional. As the elements are styled to fit exactly within their parent
elements, we also add the text from the anchor into the .
Finally, we use jQuery's hover() method to attach mouseover and mouseout event
handlers to the elements. This method accepts two functions; the first is executed on
mouseover, the second on mouseout.
In the first function, we select the inside the that was hovered on and call
the fadeIn() method specifying the slow string. In the second function, we simply hide
the again. When we run the page in a browser, we find that the hover states are
activated when we hover over the list items. It's a great effect, and one I use frequently
when building clients' sites. In this example, we have a potential issue in that the link text
is duplicated in the elements that are added to each link. It would be trivial to hide
the link text when the is made visible, which we could do using a callback function
supplied as an argument to the fadeIn() method.
Pop quiz – using fadeIn
1. Which strings can be passed into the method as the first argument?
a. The strings short or long, which refer to the duration of the animation
b. The strings low or high, which refer to the opacity that the element
is faded to
c. The strings slow or fast, which refer to the duration of the animation
d A hexadecimal string specifying the background-color of the element
[ 26 ]