<!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动画（控制动画隐藏、显示时间轴）的更多相关文章

  1. [转] 使用反射机制控制Toast的显示时间

    大体上说就是利用toast的内部类TN 来控制show和hide ,这是一个反射机制 怎么控制toast的显示时间呢?这个就是通过tn类的show和hide的方法 http://blog.csdn.n ...

  2. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  3. Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

    Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...

  4. 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

    此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...

  5. jQuery Mobile 控制 select 的显示隐藏 display none

    如需要动态控制下拉选择菜单select的显隐,一般考虑使用display:none这个方法. 但在jQueryMobile中的select添加自定义的css,display:none 是无效的. 解决 ...

  6. js控制tr 隐藏 显示

    tr td 外面不要套div <tr> <td>排期确定结果: </td> <td> <label class="liradio&quo ...

  7. 3种纯css方法控制元素隐藏显示

    1.通过hover,也是最常用的方式.此方法要求按钮与被控制元素必须有层级关系.(兼容低端浏览器常用) <div class="nav-btn"> <h2> ...

  8. 基于jQuery的时间轴鼠标悬停动画插件

    之前为大家分享了很多jquery插件,这次我们要来分享一款不太常见的jQuery插件,它是一个时间轴,时间轴上的每一个点在鼠标滑过时都可以显示该点的描述信息,并且鼠标滑过时都可以产生一定的动画特效,比 ...

  9. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

随机推荐

  1. [面向对象之继承应用（在子类派生重用父类功能（super），继承实现原理（继承顺序、菱形问题、继承原理、Mixins机制），组合]

    [面向对象之继承应用(在子类派生重用父类功能(super),继承实现原理(继承顺序.菱形问题.继承原理.Mixins机制),组合] 继承应用 类与类之间的继承指的是什么'是'什么的关系(比如人类,猪类 ...

  2. cmake和make

    学计算机的,在写代码的时候,IDE安装好,环境按着教程配置好,就直接代码了,编辑器的具体原理只是一知半解,现在来系统学习一下,为了方便以后学习HElib! make和cmake 写程序大体步骤为: 1 ...

  3. Map 实现类之一：HashMap

    Map 实现类之一:HashMapHashMap是 Map 接口 使用频率最高的实现类.允许使用null键和null值,与HashSet一样,不保证映射的顺序.所有的key构成的集合是Set:无 ...

  4. .Net core Worker Service 扩展库

    .Net core Worker Service 扩展库,目的为更易控制每一个worker 的运行. 提供根据配置文件对每一个Worker的停止.启动和自动解析注册Worker. 获取配置的方式不限于 ...

  5. Java 四种内置线程池

    引言 我们之前使用线程的时候都是使用 new Thread 来进行线程的创建,但是这样会有一些问题 每次 new Thread 新建对象性能差 线程缺乏统一管理,可能无限制新建线程,相互之间竞争,及可 ...

  6. Linux系统添加永久静态路由的方法（包含Centos7）

    一.使用route命令添加 使用route 命令添加的路由,机器重启或者网卡重启后路由就失效了,方法:A.添加到主机的路由# route add –host 192.168.1.10 dev eth0 ...

  7. 学习android开发的一些笔记

    一:UI开发 由于我们使用了android:layout_weight属性,此时控件的宽度就不由android:layout_width来决定了,这里指定成0dp是一种比较规范的写法. android ...

  8. Django Admin后台管理功能使用

    前言 用过Django框架的童鞋肯定都知道,在创建完Django项目后,每个app下,都会有一个urls.py文件,里边会有如下几行: 1 2 3 4 5 from django.contrib im ...

  9. 某SPI设备驱动引起的开关机压力测试死机问题一例

    环境 硬件平台:某ARM SoC 软件平台:Linux 问题现象:产品做开关机压力测试,发生死机. 分析 用crash工具解析两次死机dump信息,得到死机前的log如下.两次死机的backtrace ...

  10. GO语言面向对象01---封装属性与创建对象的方法与工厂模式

    package main import "fmt" /* 面向过程编程:调度大量的变量.函数 ---------- 面向对象编程(OOP=Object Oriented Progr ...