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 中显示方法为:. ...
随机推荐
- Codeforces Round #396.D
D. Mahmoud and a Dictionary time limit per test 4 seconds memory limit per test 256 megabytes input ...
- class和id的区别
我们平常在用DIV CSS制作Xhtml网页页面时,常会用到class 和id来选择调用CSS样式属性.对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又 ...
- Git学习之路（6）- 分支操作
▓▓▓▓▓▓ 大致介绍 几乎所有的版本控制系统都会支持分支操作,分支可以让你在不影响开发主线的情况下,随心所欲的实现你的想法,但是在大多数的版本控制系统中,这个过程的效率是非常低的.就比如我在没有学习 ...
- rips中如何使用PHP虚拟机自带函数--token_get_all
这两天在看rips源码,发现,它在审计php代码时调用了php虚拟机自带的token_get_all此函数. 这一函数会将php源码按照内置的规则进行归纳,并输出成数组格式. 如: <?php ...
- 从HTML5规范弄清i、em、b、strong元素的区别
为了语义化,HTML5增加了不少新标签.其中i.em和b.strong这两组标签是最容易弄混的,不好好去探究一下,还真说不清.这个也是前端面试中经常会问的问题.今天从源头上,也就是从HTML5的文档( ...
- 裸机（Bare Metal）安装CoreOS
本文以 1235.9.0-stable 为例,在WMWare中进行安装. 1.获取安装资源 https://coreos.com/releases/ 通过"Browse Images&quo ...
- TCP和UDP 的区别和适用场合
TCP和UDP式TCP/IP中能够实现传输层功能的.具有代表性的协议,其主要特点和区别如下: TCP: 面向连接的.可靠的流协议.为提供可靠性传输,TCP实行"顺序控制"或&quo ...
- php 实现购物车功能,以大苹果购物网为例，上图上代码。。。。
首先是几个简单的登录页面 <body> <form action="chuli.php" method="post"> <div ...
- JVM学习之类加载
该文使用Hotspot JDK1.7 一.类加载器 1.什么是类加载器 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个java ...
- 百度地图API-控件
初始化百度地图的基础方法我们已经学会了,那么,想让我们的地图展示的更美观,体验度更好,自然离不开百度地图API给我们提供的丰富的插件.同时呢,我们还可以通过Control类自定义控件.那么,百度地图A ...