jQuery 1.4 Animation Techniques - Index of

Fading Animations
Next we pass a reference to the deleteRow function that we just defined to jQuery's
click() event-helper method. We don't provide the deleteRow function itself as an
argument to the click() method this time, as it is easier and less repetitive to pass the
function reference to the methods instead of defining it several times.
We then add a click handling function to the and the elements that exist
in the confirmation panel and are inserted each time a delete icon is clicked. We use the
live() method here so that we don't have to rebind to each handler whenever one of
these elements are created.
Whether the or the Cancel link is clicked, we first check the id of the clicked
element (accessible via the this keyword) to determine which element was clicked.
Because all we are checking is the id of the element, we don't need to wrap the this
keyword in jQuery functionality ($()).If the id is delete, we know the button was clicked
and can proceed with fading out the so that it is completely transparent, and then
removing it from the page altogether using a callback function supplied as an argument to
the fadeTo() method.
If the id is cancel, we know that the element was clicked. In this case, we stop the
browser from following the link with preventDefault(), remove the pre-delete class
name from the , and then fade it back to full opacity.
We also use a callback function for this method too. Within it we check whether the element
that was faded contains a filter style property, and if it does, we remove the filter
attribute from the element. This fixes the issue with aliased text in IE which affects elements
after they have been faded.
This is all we need to make our fadeTo() example work as intended in most browsers.
Whenever one of the delete icons is clicked, the corresponding row is animated to 50%
opacity and the confirmation is then displayed.
This requires the action be confirmed or canceled. When the Cancel link is clicked, the row
is animated back to full opacity. When the delete is clicked, the row is animated
all the way to full transparency and then removed from the page.
Pop quiz – using fadeTo
1. Which arguments must be provided when using the fadeTo() method?
a. The duration and easing arguments
b. The ending opacity
c. A callback function
d. The duration and ending opacity
[ 42 ]