Home > Developer > JavaScript
This series of articles is my summary after reading jQuery 1.4 Animation Techniques. If you are interested, you can read the original books.
Animation effects play an indispensable role in enriching the interactive experience of websites. They can make your websites cooler and more attractive.
When to use Animation:
1. When a page, pop-up box, or content area is displayed or hidden;
2. When some content is moved from one place on the page to another;
3. When some content on the page changes the status due to user operations;
4. When some content changes between several States;
5. When guiding users to perform certain operations or attract their attention to some important information.
When should animation not be used:
1. When some operations require frequent repeated operations;
2. When the device cannot fully display the animation effect (that is to say, the animation will occupy a lot of computer resources and affect the performance );
3. Instant operations.
Of course these rules 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 is valuable.
1. Is the animation suitable for your target customers;
2. Is the animation practical;
3. Whether the animation enhances the user experience;
4. Whether the animation runs at an appropriate speed.
Next, let's start with our first example: Create an animation loading indicator. I directly paste the source code with comments on it.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript" src = "Scripts/jquery-1.4.1.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
// Create a loader div object
// The jQueryjQuery (html, [ownerDocument]) method is used here. If you don't know how to check the api
Var loader = $ ("<div> </div> ",{
Id: 'loader'
Upload.css ('display', 'None ');
// Create a display bar
Var bar = $ ('<span> </span> 'mirror.css ('opacity', 0.2 );
// Time interval object
Var loadingInterval = null;
// Create three display entries and add them to the loader object
For (var I = 0; I <3; I ++ ){
Bar. clone () // use clone to Improve the Performance. You do not need to re-create an object every time. clone is faster than create.
. AddClass ('bar-'+ I). appendTo (loader );
}
// Add the loader to the back of the go button
Loader. insertAfter ('# go ');
Function runLoader (){
// Obtain three display entries
Var firstBar = loader. children (': first '),
SecondBar = loader. children (). eq (1 ),
ThirdBar = loader. children (': last ');
// Perform animation effects on the three display entries respectively
// The overall effect is to change the three display entries to 1 and then to 0.2.
FirstBar. fadeTo ('fast ', 1, function (){
FirstBar. fadeTo ('fast ', 0.2, function (){
SecondBar. fadeTo ('fast ', 1, function (){
SecondBar. fadeTo ('quick', 0.2, function (){
ThirdBar. fadeTo ('fast ', 1, function (){
ThirdBar. fadeTo ('quick', 0.2)
});
});
});
});
});
};
// Set the toggle event for the go button
$ ('# Go'). toggle (function (){
// When you click it for the first time, the loader is displayed, and setInterval is created, and runLoader is executed every 1200 milliseconds.
Loader. show ();
RunLoader ();
LoadingInterval = setInterval (runLoader, 1200 );
}, Function (){
// When you click again, hide the loader and delete setInterval.
Loader. hide ();
ClearInterval (loadingInterval );
});
});
</Script>
<Style type = "text/css">
# 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;
}
</Style>
</Head>
<Body>
<Input id = "go" type = "button" value = "Initiate the action"/>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
