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 中显示方法为:. ...
随机推荐
- TFS应用经验-大型项目数据仓库抽取导致的TFS应用无法访问
在超过千人使用的TFS生产环境中,每天周期性出现无法正常查看工作项白板.无法签入代码.无法进行自动化构建.无法进行报表数据的查看等情况,真是一个让人焦灼的问题.作为TFS平台支持和运维的团队,也想进了 ...
- 关于下载SAE日志签名认证的方法——PHP版
之前需要下载SAE上的日志存入数据库,因此研究了下SAE的签名认证和日志下载.这个链接是SAE官方给出的API文档.https://www.sinacloud.com/doc/api.html#qia ...
- stop总结
<!DOCTYPE html><html><head><meta charset="utf-8"><script src=&q ...
- Python 接口测试(三)
四:python接口之http请求 python的强大之处在于提供了很多的标准库以及第三库,本文介绍urllib 和第三库的requests. Urllib 定义了很多函数和类,这些函数和类能够帮助我 ...
- typedef struct 是什么意思
typedef用于定义一种新类型例如定义了如下的结构typedef struct student{int age;int score;}STUDENT;那么则有STUDENT stu1;就相当于str ...
- 在内存充足时malloc函数分配内存失败的原因及解决
昨天在修改自己的代码的时候,碰到了malloc函数内存分配失败,上网翻了翻,一个很可能的原因是之前的代码出现了越界操作,导致malloc分配函数所涉及的一些信息被破坏.在这个思想的指导下,今天又是郁闷 ...
- Ajax跨域实现淘宝/百度搜索下拉提示效果
最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:
- 学习ASP.NET MVC(十)——排序
1 按照价格对书籍进行排序 下面我们通过一个简单的例子学习如何对书籍信息按照价格进行排序. 首先,我们在Controllers\BookController.cs文件中的SearchIndex方法添加 ...
- .Net小白的第一篇博客
2016年8月8日,经过了一周的纠结.我决定放弃了,原来学了六年并且工作两年的学前教育,走上了开发的道路.我认为生活就应该这样,就应该充满挑战,而不是每天在重复相同的工作!作为插班生的我,于2016年 ...
- android性能优化的一些东西
说到android性能优化,总觉得是一个很模糊的东西,因为app的性能始终适合手机本身的性能挂钩的,也许一些消耗内容的操作,在一些移动设备可以运行,但是在另外一些上面就会出现内存溢出的问题,但是不管怎 ...