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 相关文章推荐
javascript实现二分查找法实现代码
Nov 12 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
通过JS判断网页是否为手机打开
Oct 28 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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
大师制作的中短波矿石收音机
2020/04/02 无线电
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
php调用c接口无错版介绍
2014/03/11 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
vue中各种通信传值方式总结
2019/02/14 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python3.x实现发送邮件功能
2018/05/22 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
读书月活动方案
2014/05/22 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
总结Python常用的魔法方法
2021/05/25 Python
使用Python解决图表与画布的间距问题
2022/04/11 Python