jquery动画 -- 1.加载指示器

  该系列文章是我阅读《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])方法,不懂得朋友去看下apivar 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>

  

  demo下载:jQuery.animation.loader.zip

转载于:https://www.cnblogs.com/softlover/archive/2012/08/15/2639881.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/434333.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centos7 安装redis_Redis6安装(上) - 单机单实例

首先下载新版的redis6并且上传到centos7&#xff1a;安装redis需要gcc的环境&#xff0c;和以往老版本不同&#xff0c;这里的gcc需要高一点的版本。 yum install gcc-c随后升级gcc版本 yum -y install centos-release-scl yum -y install devtoolset-9-gcc devtoolset-9-gcc-c…

SIP消息路由

本文通过一个完整的SIP呼叫实例解释SIP头部的一些常见字段&#xff0c;在对这些字段的解释的同时也阐述了SIP消息的路由过程。下图是呼叫的消息流示意图和所有的消息头部(因为SDP和消息路由无关&#xff0c;故在此省略)&#xff1a; atlanta.com . . . biloxi.com . prox…

手机输入法带拼音声调_word中拼音横向设置

前言在word编辑文字的时候&#xff0c;可以加注拼音&#xff0c;这对于陌生文字辨别读音非常有帮助&#xff0c;但是插入的拼音都是在文字上方的&#xff0c;那如果我们想要横向插入拼音的话&#xff0c;应该怎么操作呢&#xff1f;今天小编就给大家分享&#xff0c;在word中拼…

WCF配置报错 在 ServiceModel 客户端配置部分中,找不到名称 和协定

<?xml version"1.0" encoding"utf-8" ?><configuration><system.serviceModel><client><endpoint address"net.tcp://192.168.6.101:8000/DataAccessService" binding"netTcpBinding" bindingConfigurat…

SIP基础协议总结

SIP协议是一个用于建立&#xff0c;更改和终止多媒体会话的应用层控制协议&#xff0c;大量借鉴了成熟的HTTP协议&#xff08;文本格式编码&#xff0c;Request消息中的method等&#xff09;&#xff0c;采用基于文本的UTF-8编码方式&#xff0c;可以承载与UDP或者TCP协议之上(…

怎么在安卓布局里设置滚动字体_Get新技能|如何在手机上设置文字版拼音?

首先明确一点&#xff1a;安卓手机里的汉字带上拼音&#xff0c;是需要安装拼音字体&#xff0c;而不是拼音输入法。大部分安卓手机里的汉字带上拼音&#xff0c;可按如下步骤操作&#xff1a;注&#xff1a;视频后小总结1.对于大部分现在的手机来说&#xff0c;已经提供了换字…

HTTP、TCP、UDP、Socket (转)

先来一个讲TCP、UDP和HTTP关系的1、TCP/IP是个协议组&#xff0c;可分为三个层次&#xff1a;网络层、传输层和应用层。在网络层有IP协议、ICMP协议、ARP协议、RARP协议和BOOTP协议。在传输层中有TCP协议与UDP协议。在应用层有FTP、HTTP、TELNET、SMTP、DNS等协议。因此&#x…

Asterisk学习进阶

Asterisk学习进阶 介绍篇 抛开所有概念&#xff0c;首先从单词学起。估计很多人和我一样没有明白这个词是什么意思&#xff0c;或许猜测他还可能是一个组合词。其实它就是“*”&#xff0c;作为搞程序的我们看到这个东东想到的也许会是乘号&#xff0c;当然有另外一大帮人想到的…

windows 禁用ipv6服务_39.Dism++ Windows系统简洁优化

Dism的特点Dism无需任何Dism组件&#xff0c;即可兼容高低版本所有系统&#xff01;而微软Dism则需要3个版本。Dism是Dism的交集&#xff0c;提供完全的图形化操作&#xff0c;几乎支持Dism的所有功能以及大量Dism原本所不支持的功能。管理更新、驱动、功能、Appx、可选功能、服…

windows功能_有 20 多种功能的 Windows 原生日历替代软件

Win 10 出来这么久了&#xff0c;不知道还有多少在用 XP 或者 Win 7 的朋友呢&#xff1f;今天小美要推荐的软件&#xff0c;是专门针对 Win 10 的&#xff0c;没有升级系统的小伙伴可能就无法使用了~这是一款用来替换 Windows 10 任务栏原生时间日历的软件&#xff0c;名字叫「…

小白学数据分析-----留存率是什么?

篇外话 前段时间比较忙碌&#xff0c;小白系列也因此停了一段时间&#xff0c;这期间做了不少分析&#xff0c;发现和总结了不少经验&#xff0c;自己觉得还是很有用&#xff0c;不过倒都是一些基础的东西。最近很多人都在问一些基础术语和计算方式&#xff0c;我懂得不多&…

Asterisk 学习进阶 2

Asterisk 学习进阶-2 这儿只是把添加的用户配置列出来。 [830] typefriend ; Friends place calls and receive calls context830 ; Context for incoming calls from this user ;secretblahpoly hostdynamic ; This peer regi…

nfc reader智能解码程序_更关注健康的高性价比智能手表 华米Amazfit Pop体验

现如今市面上有着种类繁多的智能手表产品&#xff0c;在软硬件各方面的体验上&#xff0c;华米的智能手表绝对是走在前列的&#xff0c;近期华米又发布了全新的智能手表&#xff1a;Amazfit Pop&#xff0c;双十一售价299元&#xff0c;这是一款专为爱运动&#xff0c;追求实用…

poj 3009 Curling 2.0 (dfs的应用)

http://poj.org/problem?id3009 &#xff08;1&#xff09;这是一个用球撞石头的游戏&#xff0c;撞到石头&#xff0c;石碎球停。在规定的10次抛球机会下&#xff0c;若求移动到终点就赢&#xff0c;否则算输了&#xff08;出界直接算输&#xff09;。 &#xff08;2&#xf…

Asterisk学习进阶-3

配置就先说那么一些&#xff0c;其他也都是类似的配置&#xff0c;只是熟练程度问题了&#xff0c;原理相通&#xff0c;接下来就不在赘述功能配置&#xff0c;我们得花些精力来分析功能模块以及他们之间的相互配合问题&#xff0c;因为自己这些东西看的时间也不久&#xff0c;…

移动app测试的多样性_快速搞定APP移动端自动化测试

1. 何为数据驱动什么是参数化&#xff1f;什么又是数据驱动&#xff1f;经常有人会搞不明白他们的关系&#xff0c;浅谈一下个人的理解&#xff0c;先来看两个测试中最常见的场景&#xff1a;登录&#xff1a;不同的用户名&#xff0c;不同的密码&#xff0c;不同的组合都需要做…

ui自动化测试框架_浅谈前端(UI)自动化测试

作为一名测试开发从业者&#xff0c;自动化测试好像是绕不开的话题...。结合最近接触到的一些测开应聘同学聊到关于前端自动化测试及自己的理解&#xff0c;分享一下自己对UI自动化测试的认识&#xff0c;大概如下。测试分层的自动化测试思想自动化测试分层思想所倡导的是对系统…

【转发】响应式Web设计?怎样进行?

什么是响应式Web设计&#xff1f;怎样进行&#xff1f;眼下&#xff0c;几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐&#xff0c;就是为iPhone、iPad、黑莓、Kindle…各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为…

cad坐标归零lisp_批量除一个数的lisp,请高手改成保留成设置小数位置。

我有一个在cad里批量除以一个数的LISP。其中《(setq newr (rtos (/ (atof old0) s0) 2 1))》的1就是决定小数点后保留1位的。请高手改一下&#xff0c;能否增加语句&#xff0c;能在cad里选择。现在&#xff0c;我是修改以后再加载&#xff0c;比较麻烦。lisp见下文。(加载命令…

基于Asterisk的VoIP开发指南——(1)实现基本呼叫功能

说明&#xff1a; 本文档探讨基于Asterisk如何实现VoIP的一些基本功能&#xff0c;包括基本呼叫功能的方案选取、主叫号码透传、如何编写AsteriskAGI程序、Radius认证计费模块等。 本文档VoIP软终端使用X-Lite&#xff0c;其它终端均可以接入测试。 文章内容仅供参考,转载请注…