jQuery 1.4 Animation Techniques - Index of

Download from Wow! eBook
};
$("#go").toggle(function() {
loader.show();
loadingInterval = setInterval(function() {
runLoader(); }, 1200);
}, function() {
loader.hide();
clearInterval(loadingInterval);
});
[ 15 ]
Chapter 1
3. Save the file as loading.html in the main project folder (jquery-animation).
Finally, we'll need to add a few basic styles to the example. Create a new file in your
text editor and add to it the following code:
#loader { margin:10px 0 0 36px; }
#loader span {
display:block; width:6px; float:left; margin-right:6px;
border:1px solid #336633; position:relative;
background-color:#ccffcc;
}
#loader .bar-0 { height:15px; bottom:-20px; }
#loader .bar-1 { height:25px; bottom:-10px; }
#loader .bar-2 { height:35px; margin-right:0; }
4. Save this file in the css folder as loading.css.
What just happened?
The hardcoded onto the page is used to show and hide the loading animation.
This is done purely for the purpose of this example. In an actual implementation, we'd show
the loading animation at the start of a load operation, when new content was being added
to the page for example, and then hide it again once the operation was complete.
The first thing we do inside the outer function is set some variables. We create a new
element as a container for the loader, using an object literal as the second argument to the
$() (jQuery()) method to give it an id of loader. We then set its style to display:none
with jQuery's css() method so that it is not immediately visible.
We also create a new element, which will be used as a template to create the
three individual loading bars. We set its opacity to 0.2 (20% opaque), also using the css()
method. jQuery normalizes this style for us so that it works correctly in Internet Explorer. The
last variable, loadingInterval will be used to store the id of an interval so that we can
clear the interval when we need to. We set this to null initially as the interval has not yet
been set.