jQuery 1.4 Animation Techniques: Beginners Guide: This book and eBook will enable you to quickly master all of jQuery's animation methods and build a toolkit of ready-to-use animations using jQuery 1.4.

In 1989 Compuserve released GIF89A, an enhanced version of the popular GIF image format which allowed a sequence of frames to be stored as a single image and played by supporting software.

The GIF format was already popular on what passed for the Internet in those days (remember, the World Wide Web didn't even exist until 1991) due to its small file size, lossless compression, and wide support. The enhanced version, which allowed animations that anyone could create themselves provided they had supporting software, quickly became popular also.

In addition to animated GIFs, browser vendors added support for proprietary HTML elements that handled animation natively, such as the <blink> and <marquee> elements, which added different animated effects to text.

Neither of these elements was particularly attractive or successful and the W3C, as well as leading industry accessibility and usability experts, advised against their use in most cases. Different browsers at the time supported one or the other of these elements but not both. Both elements were added by their respective vendors as part of the original browser wars.

In the late 1990s, popular browsers added support for a technique known as Dynamic HTML (DHTML), which allowed scripting languages to modify the contents of a page after the page had loaded. DHTML wasn't any single technology, but rather a collection of techniques (JavaScript, CSS, the DOM, and so on) that worked together to enable a basic level of interactivity and/or animation.

In fact, DHTML made it possible to create quite advanced animations, but restrictions in the early implementations of the required technologies, as well as hugely varying browser support, made DHTML tricky at best.

This era also saw the release and rise of Flash (and Shockwave, a competing technology that was eventually subsumed by Macromedia), a vector and raster graphics format that allowed audio and video streaming, frame-by-frame animation, and a host of other features. Flash quickly became popular and at the time of writing is still the number one format for web-based video, browser-based gaming, and advertising.

Gradual standardization of the DOM across (most) browsers, as well as the rise of JavaScript libraries such as jQuery, which abstracted away the differences that remained between browsers, have opened up animation to a much wider range of people than ever before. The term DHTML isn't often used these days because of its connotations with poor support between browsers, but the underlying principles and techniques that drive many interactive and animated sites remain similar.

Today, in addition to the animations made plausible and accessible by JavaScript libraries we have much newer, much more exciting possibilities with CSS3 and native HTML elements such as the <canvas> element, which provides complete pixel-level control over an area of the page. We'll be looking at some CSS3 animation techniques, as well as the <canvas> element in more detail towards the end of the book. Flash-based animation is on the decline for the first time this century, and new technologies are poised on the horizon.

Modern operating systems use animations constantly to engage their users and to create a more compelling computing experience. Used in the right way, animations provide assistance to the users of the system, to lead and guide them through different tasks, provide context or feedback, and reinforce positive actions.

A good example of this is the way that applications are minimized in Windows 7, or OSX—the application appears to squish down into the icon on the taskbar/dock, which shows the user where to go when they want to return to the application. It's the simple details like this that can be the most effective.

Good animations can lend an air of sleek professionalism to an interface and make it appear more advanced or more modern. Apple's iPhone (or iPad) is a perfect example—the seamless use of subtle animations and transitions within the operating system and its applications allow the user to connect with the device in a profoundly satisfying and immersive way. Anything that appears or disappears is faded smoothly in or out, and menus and content panels slide in or out from the top or the sides. Sudden events can unsettle or distract users, but a well-timed animation can help to make them aware that something is happening or something is about to happen.

Be warned however—badly executed, clumsy, or overly pointless animations can do the opposite, making your interface appear basic, poorly designed, or inferior. No animation can be better than poor animation. Even if your application works perfectly, superfluous animations can leave your users feeling frustrated and cause them to forgo your application or website.

Desktop computers and a rapidly growing number of mobile and hand-held devices are easily powerful enough to handle quite complex animations, and with integrated hardware acceleration and more refined CSS3 and HTML5 making its way into the latest browsers, the possibilities of what can be achieved on the Web are increasing exponentially.

jQuery provides a range of animation methods natively, without the use of additional effects libraries or plugins. There are however, many plugins contributed from the online community, including jQuery UI, the official UI library for jQuery, which extend jQuery's animation capabilities. Natively, jQuery provides methods that add sliding and fading behavior with minimal configuration, and which work cross-browser. It also exposes methods related to managing the animation queue, and provides a means for creating custom animations that work on almost all numerical CSS styles. Over the course of this book, we'll look at every animation method that the library contains in detail. These methods are listed below:

All in all, it gives us a powerful and robust environment to easily add almost any type of animation that we can conceive.

Animation is also a popular theme for plugins, with many available plugins that bring different types of animations to our fingertips, for instant implementation with minimal configuration. We'll look at several plugins later in the book.

Each of the example files we'll create throughout the course of this book will rely on a common set of elements. Rather than repeatedly showing these same elements in every single code section and example in the book, I'll show you them just once now:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/.css">
      <!--[if lte IE 8]>
      <script src=http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
  </head>
  <body>
    <script src="js/jquery.js"></script>
    <script>
       (function($){


      })(jQuery);
    </script>
  </body>
</html>

Save a copy of this file now and call it template.html. This is the base file that we'll use for every single example, so when we start working through the examples and I say "add the following markup to the <body> of the template file", I mean insert it directly between the opening <body> tag and the first <script> tag in the template file, as shown above. Whenever we add any JavaScript to the template file, it will be added within the anonymous function in the second <script> tag.

Let's just take a look at what the template file contains. We start out with the HTML5 doctype declaration as we'll be using plenty of HTML5 elements in our examples. We also set the lang attribute of the <html> element to en, and <meta> tag with its charset attribute to utf-8, neither of which are strictly required but are nevertheless best practice.

Next comes an empty <title> element, to which we can add the name of each example, and a <link> element with an incomplete href, ready for us to add the name of the stylesheet that each example will use.

Because current versions (prior to version 9) of Internet Explorer don't support any HTML5 elements, we need to use Remy Sharp's html5shiv script to make this browser use them correctly. We can link to the online version of this file for convenience using a conditional comment that targets all versions of IE lower than version 9. Feel free to download html5.js and store it locally if you plan on playing with the examples in IE while disconnected from the Internet.

To get the most out of the examples throughout the book, it would probably be wise to upgrade to the latest stable release versions of the most common browsers, which at the time of writing are Firefox 3.6.13, Chrome 9.0, Safari 5.03, and Opera 11, although expect these to change quite rapidly.

At the time of writing, Internet Explorer 9 is available in beta release and is scheduled to go to full release at some point in early 2011. IE9 does support a lot of HTML5 and CSS3, so using the html5shiv file may not be required.

The <body> of the page is empty except for some <script> tags. We'll obviously use jQuery in every example, so the first tag links to that. The current version of jQuery is 1.5 at the time of writing (but like the browser versions, this is likely to change pretty quickly!).

In the second <script> tag we have an empty function, into which all of the example JavaScript code we write will go. We pass the jQuery object into our anonymous function and alias it to the $ character. Although not strictly necessary (except in the example where we create a jQuery plugin), this is another good habit to get into.

Let's look at a basic example of the kind of animation that can help reassure our visitors that something is happening. If the user performs an action, and the results are not displayed immediately, feedback that their action is in the process of being executed is a helpful use of animation. This is what we will end up with at the end of the example:

In the previous screenshot we can see the loading indicator centered beneath the trigger <button>. It features three separate loading bars which sequentially light up to show that something is happening. Each bar is styled slightly differently.

In this example we'll create a simple animated loading indicator that we can start when a particular process is initiated, and stop once the process has completed.

In this introductory chapter, we looked at a brief history of animation on the Web including how it began, early HTML elements and browser support, the rise of Flash, and the direction it's heading in the not too distant future.

We also looked at how animations can be used in a user interface to enhance the user experience. We saw some guidelines as to when animation should and shouldn't be used and looked at some of the things we should consider when implementing animations.

We closed the chapter with a basic example looking at a loading animation. In this example, we used the fadeTo() jQuery method to change the opacity of elements on the page, and a simple interval to "play" the animation. We didn't cover the method in full detail, but we saw one example of how it can be used. We'll look at this method in more detail in the next chapter, which covers all of the fading animations provided by jQuery.