jQuery 1.4 Animation Techniques - Index of

[ 41 ]
Chapter 2
What just happened?
Our script is a little longer than those in previous examples, but still relatively simple; let's
step through what happens. First we get a reference to the outer container for our message
widget. We get the element using the standard JavaScript document.getElementById()
function. We can use this DOM node as a context for jQuery methods to make selecting
elements from the DOM faster. Selecting elements by class name is not very efficient
(even with jQuery), so being able to pass in a DOM node to a jQuery selector to tell jQuery
where to begin for searching for the element makes our queries much faster than searching
through the entire document each time we want to get an element using its class name.
We also store a reference to the element as we'll need to refer to this element
throughout the script. Instead of creating a new jQuery object and selecting the element
each time we need to manipulate it, we create a single jQuery object representing the
element (notice how we use our messageList variable as a context for the selection)
and store it in a variable for use as many times as we require with no additional overhead.
Next we create a series of new elements for use later in the script. We create a container
and give it some attributes including a class name and some text. Note that the
word class is surrounded with quotation marks to prevent Internet Explorer throwing
script errors.
We also create a new element and a new element and give both of these
some attributes too. The new button and anchor elements are appended to the new
container. These elements are not added to the page however, they are kept in memory
for use later on in the script.
Next we add an inline function stored in the deleteRow variable, which is used to handle
clicks on the delete icons in each row of the . Within this function we first use the
preventDefault() JavaScript method to prevent the delete link being "followed" by the
browser and jumping back to the top of the page. We then select the closest parent
element and call the fadeTo() method specifying a duration of 400 milliseconds
(the default) and an ending opacity of 0.5.
We also supply a callback function that is executed when the animation ends. We use this
function to add a class name to the row so that we can easily refer to it later on. We then
create a copy of the container element (including the child elements we added to it) that we
created at the start of the script using jQuery's clone() method. Copying these elements
from memory is much more efficient than creating them from scratch each time the function
is executed. The copy of the container is then inserted into the widget after the .
To prevent other messages being selected for deletion (and a build-up of confirmation
messages), we unbind the click handler from the delete links in each row. We don't need
to select the links from the DOM at this point. We use the messages variable (containing a
reference to the ) and jQuery's find() method to select the links without needing
to create a new jQuery object.