jquery animation 1. loading indicator_jquery

This series of articles is my summary after reading "jQuery 1.4 Animation Techniques". Friends who are interested can read the original book.
Animation effects play an indispensable role in enriching the interactive experience of the website. It can make your site cooler and more attractive.

When to use animation:
1. When showing or hiding a page, pop-up box or content area;
2. When some content moves from one place on the page to another;
3. When some content on the page changes state in response to user operations;
4. When some content transitions between several states;
5. Guide the user to perform a certain When doing some operations, or drawing their attention to some very important information.

When animation should not be used:
1. When certain operations require users to repeat operations frequently;
2. When the device cannot fully display the animation effect (that is, the Animation will occupy a lot of computer resources and affect performance);
　3. Instant operation.

Of course, these regulations are not absolute. You need to decide whether to use animation based on your actual situation. Below are some checklists (verification lists). As long as the following options are met, your animation will be valuable.
　1. Whether the animation is suitable for your target customers;
　2. Whether the animation is practical;
　3. Whether the animation enhances the user experience;
　4. Whether the animation runs at an appropriate speed.

Next we start our first example, creating an animated loading indicator. I will post the source code directly with comments on it.

Copy code The code is as follows:

.org/1999/xhtml">







< ;input id="go" type="button" value="Initiate the action" />