该系列文章是我阅读《jQuery 1.4 Animation Techniques》后的总结，有兴趣的朋友可以去看原版书籍。
<!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>
