该系列文章是我阅读《jQuery 1.4 Animation Techniques》后的总结，有兴趣的朋友可以去看原版书籍。
动画效果对于丰富网站的交互体验起到了不可或缺的作用，他可以让你的站点更酷，更吸引人。
什么时候使用动画：
1.当显示或隐藏页面、弹出框或内容区域的时候；
2.当一些内容从页面的一个地方移动到其他地方的时候；
3.当页面中的一些内容，应用户的操作而产生状态改变的时候；
4.当一些内容在几种状态间转变的时候；
5.引导用户去执行某些操作，或者引起他们对某些很重要信息注意的时候。
什么时候不应使用动画：
1.当某些操作是需要用户频繁重复操作的时候；
2.当设备无法充分显示动画效果的时候（也就是说该动画会占用计算机的很多资源，会影响到性能）；
3.即时操作。
当然这些规定都不是绝对的，你需要根据你的实际情况来决定是否使用动画。下面是一些checklist（验证列表），只要满足下面几条选项，你的动画就是有价值的。
1.动画是否适合你的目标客户；
2.动画是否实用；
3.动画是否增强了用户体验；
4.动画是否以合适的速度运行。
下面我们开始我们的第一个例子，创建一个动画加载指示器。
我直接把源码贴出来，上面有注释。
<!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 () { //创建loader div对象 //这里使用jQueryjQuery(html,[ownerDocument])方法，不懂得朋友去看下api var loader = $("<div></div>", { id: 'loader' }).css('display', 'none'); //创建显示条 var bar = $('<span></span>').css('opacity', 0.2); //时间间隔对象 var loadingInterval = null; //创建三个显示条，并添加到loader对象中 for (var i = 0; i < 3; i++) { bar.clone()//使用clone的可以提高性能，不用每次都去重新创建对象，clone比创建来的快 .addClass('bar-' + i).appendTo(loader); } //将loader添加到go按钮后面 loader.insertAfter('#go'); function runLoader() { //获取三个显示条 var firstBar = loader.children(':first'), secondBar = loader.children().eq(1), thirdBar = loader.children(':last'); //分别对三个显示条执行动画效果 //总的效果就是依次让三个显示条，透明度变为1，再变为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) }); }); }); }); }); }; //对go按钮设置toggle事件 $('#go').toggle(function () { //第一次点击的时候，显示loader，创建setInterval，每1200毫秒执行一次runLoader loader.show(); runLoader(); loadingInterval = setInterval(runLoader, 1200); }, function () { //再次点击的时候，隐藏loader，删除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>
demo下载：jQuery.animation.loader.zip