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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
浅析vue-router原理
2018/10/19 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
Python3 入门教程 简单但比较不错
2009/11/29 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
python基本语法练习实例
2017/09/19 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
会员活动策划方案
2014/08/19 职场文书
贷款承诺书
2015/01/20 职场文书
2015年科室工作总结
2015/04/10 职场文书
通知的格式范文
2015/04/27 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书