jquery列队动画简单演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<style type="text/css">
.test {
height: 100px;
width: 100px;
background: green;
display: none;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="test">你</div>
<div class="test">好</div>
<div class="test">啊</div>
<div class="test">哈</div>
<button class="show">show</button>
<button class="hide">hide</button>
<script type="text/javascript">
$(function(){
$('.show').on('click',function(){
$('.test').first().show('fast',function showBox(){
$(this).next().show('fast',showBox);
})
})
$('.hide').on('click',function(){
$('.test').last().hide('fast',function hideBox(){
$(this).prev().hide('fast',hideBox);
})
})
})
</script>
</body>
</html>
jquery列队动画简单演示的更多相关文章
- jQuery 滚动动画简单版
动画的思路很简单,点击页面上一个元素,页面滚动到指定位置.下面介绍一下我3个小时百度的研究成果: 首先是html部分: <html> <body> <a>顶部< ...
- HTML5/jQuery雷达动画图表 图表配置十分简单
1.HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canv ...
- 适应手机端的jQuery图片滑块动画DEMO演示
在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jQuery Easing动画效果扩展（转）
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- 放弃使用jQuery实现动画
在Web开发的圈子里,开发人员经常觉得CSS动画是一种高性能web动画技术.假设想让网页载入的更快一些,就应该用纯CSS动画.事实上这样的观点是错误的,非常多开发人员早就放弃了javascript的动 ...
- jQuery Easing 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery的一些简单基础知识
### 什么是jQuery?jQuery(js+Query)是一款优秀的JavaScript库,帮助开发人员用最少的代码做更多的事情,官网网站http://jquery.com/ ### 为什么学习j ...
- jQuery基础---动画效果
内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 发文不易,转载请注明出处~ 一．显示.隐藏 jQuery 中显示方法 ...
- 第一百七十二节，jQuery，动画效果
jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一．显示.隐藏 jQuery 中显示方法为:. ...
随机推荐
- WEB前端性能优化之二——css优化
1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示.HTML规范清 楚指 ...
- 360随身wifi无法使用临时解决方案大全
360随身wifi在绝大多数情况下都是可以正常使用的,但在极少数系统或网络环境下可能会出现异常,如系统服务缺失.公司网络限制.少数校园网客户端限制等等: 360攻城师正在积极努力解决 ...
- Git学习之路（6）- 分支操作
▓▓▓▓▓▓ 大致介绍 几乎所有的版本控制系统都会支持分支操作,分支可以让你在不影响开发主线的情况下,随心所欲的实现你的想法,但是在大多数的版本控制系统中,这个过程的效率是非常低的.就比如我在没有学习 ...
- SQL基础笔记
Codecademy中Learn SQL, SQL: Table Transformaton和SQL: Analyzing Business Metrics三门课程的笔记,以及补充的附加笔记. Cod ...
- SuperWebClient -一个基于CURL的.NET HTTP/HTTPS模拟神组件（1）
我们都知道,不管你是做爬虫也好,采集工具也罢,它们的HTTP/HTTPS模拟访问总是一个基础问题,我估计有很多人和我一样,虽然这样,那样的内置或是第三方类库用了很多,却总是会有一些不如意的问题存在,亦 ...
- ThinkPHP5.0学习1 — 命名空间
定义命名空间:namespace sp1: 访问命名空间:\sp1\somefunction(); 非限定名称访问方式 //访问当前命名空间内容:somefunction(); 限定名称访问方 ...
- c#之循环效率
很多人在保存数据时候对于使用数组.集合等?然后遍历数据的时候是for.froeach? 下面我就写一个小例子进行测试看看,话不多说,直接用数据说话. 1.构建数据分别是数组.集合构建,数据类型分别是值 ...
- Docker私有仓库--自签名方式
为了能集中管理我们创建好的镜像,方便部署服务,我们会创建私有的Docker仓库.通读了一遍官方文档,Docker为了确保安全使用TLS,需要CA认证,认证时间长的要钱啊,免费过期时间太短,还是用自签名 ...
- Extjs中创建Tree菜单【一】
此篇treepanel的描写是很简单,没有太大的难度,在学习时,可以先熟悉tree的一些配置信息.属性.方法和事件. 然后先写一个简单的例子,慢慢了解从中如何实现的,然后在慢慢的深入了解,实现一些复杂 ...
- 关于hive ，eclipse老是提示加载不到驱动
忙活了好长时间,很纳闷为什么加载不上驱动,驱动包.hive的依赖包.hadoop的依赖包也引入了,各种百度最后: hadoop-2.2.0/share/hadoop/common/hadoop-com ...