This series is my summary after reading "JQuery 1.4 Animation techniques", interested friends can go to the original books.
Animation effect on the rich Web site interactive experience played an indispensable role, he can make your site cooler, more attractive.
When to use animations:
1. When displaying or hiding pages, pop-up boxes, or content areas;
2. When some content is moved from one place of the page to another;
3. When the content of the page, should the user's operation and create a state change;
4. When some of the content in the transition between several States;
5. Guide users to perform certain operations, or cause them to pay attention to some important information.
When should you not use animations:
1. When some operations are required frequently repeated operation of the user;
2. When the device does not fully display the animation effect (that is, the animation will occupy a lot of resources of the computer, will affect performance);
3. Instant operation.
Of course these rules are not absolute, you need to depend on your actual situation to decide whether to use animation. Here are some checklist (validation lists), and your animations are valuable as long as you meet the following few options.
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 to run at the right speed.
Let's start with our first example, create an animated load indicator, and I'll just post the source code, with comments on it.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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
Here use Jqueryjquery (Html,[ownerdocument]) method, do not know a friend to see the API
var loader = $ ("<div></div>", {
ID: ' Loader '
}). css (' Display ', ' none ');
Create a display bar
var bar = $ (' <span></span> '). CSS (' opacity ', 0.2);
Time Interval Object
var loadinginterval = null;
Create three display bars and add them to the loader object
for (var i = 0; i < 3; i++) {
Bar.clone ()//using clone can improve performance without having to re-create the object every time, and the clone ratio is created faster
. addclass (' bar-' + i). Appendto (loader);
}
Add loader to the Go button
Loader.insertafter (' #go ');
function Runloader () {
Get three display bars
var Firstbar = Loader.children (': a '),
Secondbar = Loader.children (). EQ (1),
Thirdbar = Loader.children (': Last ');
Animate three display bars individually
The overall effect is to make three display bars in turn, the transparency becomes 1, and then the 0.2
Firstbar.fadeto (' Fast ', 1, function () {
Firstbar.fadeto (' Fast ', 0.2, function () {
Secondbar.fadeto (' Fast ', 1, function () {
Secondbar.fadeto (' Fast ', 0.2, function () {
Thirdbar.fadeto (' Fast ', 1, function () {
Thirdbar.fadeto (' fast ', 0.2)
});
});
});
});
});
};
Set the toggle event on the Go button
$ (' #go '). Toggle (function () {
The first time you click, display loader, create setinterval, perform once every 1200 milliseconds Runloader
Loader.show ();
Runloader ();
Loadinginterval = SetInterval (runloader, 1200);
}, function () {
When clicked again, hide loader, 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>
<body>
<input id= "Go" type= "button" value= "Initiate the action"/>
</body>
