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>
最新文章
- DPA 9.1.85 升级到DPA 10.0.352流程
- jquery 进阶
- php引用计数的基本知识
- 小吃(codevs 3231)
- MyBatis学习练习
- 手势识别官方教程(4)在挑划或拖动手势后view的滚动用ScrollView和 HorizontalScrollView,自定义用Scroller或OverScroller
- python学习之字符串
- Bootstrap 3 支持 IE8
- [转]ActiveMQ 即时通讯服务 浅析
- 移植u-boot-2012.04.01到JZ2440
- 关于vagrant一个虚拟机搭建多个项目配置(总结)
- echarts如何给柱形图的每个柱子设置不同颜色
- Spring容器的创建刷新过程
- SpringBoot------Maven Clean报错
- java.lang.RuntimeException: Unable to start activity ComponentInfo……AppCompat does not support the current theme features
- linux输入命令的时候查看目录的快捷键---菜鸟初学必看
- 在WPF中将图片转换成3D图像并可以旋转
- SVN之 trunk, branches and tags意义
- week8:个人博客作业
- 【修改编码】修改tomcat默认的编码方式
热门文章
- [Qt] 事件机制(二)
- [c++] STL 标准算法
- RHEL高级磁盘管理—Stratis
- Select Screen 0 with xrandr Ask QuestionScreen 0"; here describes your whole virtual display made of these two outputs: eDP-1-
- Debian 9.4 多网卡链路聚合bond配置
- Docker Swarm(四)Volume 数据(挂载)持久化
- Spring5学习 (核心)
- CentOS 7 设置默认进入字符界面
- Lombok 插件安装和使用
- sprintf和snprintf函数