jquery动画(控制动画隐藏、显示时间轴)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 100%;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
display: none;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-
1.9.1.min.js"></script>
</head>
<body>
<h2>slideDown</h2>
<div class="left">
<h4>测试一</h4>
<div class="a" id="a1">hide-show</div>
<button>点击slideDown显示动画</button>
</div>
<script type="text/javascript">
//点击button
//执行3秒隐藏
//执行3秒显示
$("button:first").click(function() {
$("#a1").slideDown(3000)
});
</script>
<div class="right">
<h4>测试二</h4>
<div class="b" id="a2">hide-show</div>
<button>点击slideDown执行回调</button>
</div>
<script type="text/javascript">
//点击button
//执行3秒隐藏
//执行3秒显示
$("button:last").click(function() {
$("#a2").slideDown(3000,function(){
$("#a1").slideDown(3000,function(){
$(".a,.b").slideUp(3000,function(){alert('动画结束')})})
})
});
</script>
</body>
</html>
jquery动画(控制动画隐藏、显示时间轴)的更多相关文章
- [转] 使用反射机制控制Toast的显示时间
大体上说就是利用toast的内部类TN 来控制show和hide ,这是一个反射机制 怎么控制toast的显示时间呢?这个就是通过tn类的show和hide的方法 http://blog.csdn.n ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
- Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果
Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...
- 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题
此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...
- jQuery Mobile 控制 select 的显示隐藏 display none
如需要动态控制下拉选择菜单select的显隐,一般考虑使用display:none这个方法. 但在jQueryMobile中的select添加自定义的css,display:none 是无效的. 解决 ...
- js控制tr 隐藏 显示
tr td 外面不要套div <tr> <td>排期确定结果: </td> <td> <label class="liradio&quo ...
- 3种纯css方法控制元素隐藏显示
1.通过hover,也是最常用的方式.此方法要求按钮与被控制元素必须有层级关系.(兼容低端浏览器常用) <div class="nav-btn"> <h2> ...
- 基于jQuery的时间轴鼠标悬停动画插件
之前为大家分享了很多jquery插件,这次我们要来分享一款不太常见的jQuery插件,它是一个时间轴,时间轴上的每一个点在鼠标滑过时都可以显示该点的描述信息,并且鼠标滑过时都可以产生一定的动画特效,比 ...
- 深入学习jQuery动画控制
× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...
随机推荐
- opencv——图像直方图与反向投影
引言 在图像处理中,对于直方图这个概念,肯定不会陌生.但是其原理真的可以信手拈来吗? 本文篇幅有点长,在此列个目录,大家可以跳着看: 分析图像直方图的概念,以及opencv函数calcHist()对于 ...
- Java容器 | 基于源码分析Map集合体系
一.容器之Map集合 集合体系的源码中,Map中的HashMap的设计堪称最经典,涉及数据结构.编程思想.哈希计算等等,在日常开发中对于一些源码的思想进行参考借鉴还是很有必要的. 基础:元素增查删.容 ...
- .NET程序崩溃了怎么抓 Dump ? 我总结了三种方案
一:背景 1. 讲故事 最近几天接到了几个crash的求助,可能这几个朋友没玩过怎么去生成dump,只能手把手教,感觉也不是一个办法,所以有必要总结一下,后续再有朋友咨询的话,我就可以把这篇文章丢过去 ...
- traefik: 基础入门总结
traefik介绍 traefik-现代反向代理,也可称为现代边缘路由:traefik原声兼容主流集群,Kubernetes,Docker,AWS等.官方的定位traefik是一个让开发人员将时间花费 ...
- [bug] Shell:paths must precede expression
参考 https://www.cnblogs.com/peter1994/p/7297656.html
- [Qt] 编译问题
shadow build https://blog.csdn.net/cjmcp/article/details/14135191 https://blog.csdn.net/josephfeng/a ...
- python基础之内建模块base64
一.Base64概念 什么是Base64? 按照RFC2045的定义,Base64被定义为:Base64内容传送编码被设计用来把任意序列的8位字节描述为一种不易被人直接识别的形式.(The Base6 ...
- 10.21 nmap:网络探测工具和安全/端口扫描器
nmap命令 是一款开放源代码的网络探测和安全审核工具,是Network Mapper的缩写.其设计目标是快速地扫描大型网络.nmap可以发现网络上有哪些主机,主机提供了什么服务(应用程序名称和版本号 ...
- GLSL着色器,来玩
对实现动画的前端同学们来说,canvas可以说是最自由,最能全面控制的一个动画实现载体.不但能通过javascript控制点.线.面的绘制,使用图片资源填充:还能改变输入参数作出交互动画,完全控制动画 ...
- CefSharp如何进行页面的缩放(即Ctrl+滚轮)
问题:CefSharp如何进行页面的缩放 摘要:由于CefSharp并没有提供鼠标滚轮事件.只有一个KeyboardHandler事件,因此只能接收到键盘事件. 环境:CefShap.Wpf 了解Ce ...