jquery动画1.加载指示器


Posted in Javascript onAugust 24, 2012

该系列文章是我阅读《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>
Javascript 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
jquery if条件语句的写法
May 19 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 #Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 #Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 #Javascript
javascript动态加载三
Aug 22 #Javascript
javascript动态加载二
Aug 22 #Javascript
javascript动态加载实现方法一
Aug 22 #Javascript
原生js写的放大镜效果
Aug 22 #Javascript
You might like
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
python对象及面向对象技术详解
2016/07/19 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
院药学专业个人求职信
2013/09/21 职场文书
办公文员的工作岗位职责
2013/11/12 职场文书
大学生工作求职信
2014/06/23 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
表扬稿格式范文
2015/01/16 职场文书
合作意向协议书
2015/01/29 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
微信搭讪开场白
2015/05/28 职场文书
三好学生竞选稿
2015/11/21 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
spring boot中nativeQuery的用法
2021/07/26 Java/Android
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL