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实现的激活输入框后隐藏初始内容
Jun 29 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
基于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
php 清除网页病毒的方法
2008/12/05 PHP
PHP实现搜索相似图片
2015/09/22 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
js获取class的所有元素
2013/03/28 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python版本的读写锁操作方法
2016/04/25 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
python的pip安装以及使用教程
2018/09/18 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
Python排序函数的使用方法详解
2020/12/11 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
新学期家长寄语
2014/01/19 职场文书
交通安全标语
2014/06/06 职场文书
车队安全员岗位职责
2015/02/15 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python