<!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. 简单对比vue2.x与vue3.x响应式及新功能

    简单对比vue2.x与vue3.x响应式 对响应方式来讲:Vue3.x 将使用Proxy ,取代Vue2.x 版本的 Object.defineProperty. 为何要将Object.defineP ...

  2. Spark 集群安装部署

    安装准备 Spark 集群和 Hadoop 类似,也是采用主从架构,Spark 中的主服务器进程就叫 Master(standalone 模式),从服务器进程叫 Worker Spark 集群规划如下 ...

  3. Wordpress用文件记录访客 IP和访问量

    1.记录访问量,显示访客IP [php原码] <?php /*打开文件用于记录访问量,如果文件不存在自动创建*/ $counterFile = "counter.txt"; ...

  4. component: resolve => require(['../pages/home.vue'], resolve)-装载

    import Vue from 'vue'import VueRouter from 'vue-router'// "@"相当于".."import Detai ...

  5. IDEA Git 操作常见错误处理

    使用 IDEA 的 git 进行操作时报错 更新报错 Git Pull Failed: refusing to merge unrelated histories 提交报错 Push rejected ...

  6. 一文带你搞懂 RPC 到底是个啥

    RPC(Remote Procedure Call),是一个大家既熟悉又陌生的词,只要涉及到通信,必然需要某种网络协议.我们很可能用过HTTP,那么RPC又和HTTP有什么区别呢?RPC还有什么特点, ...

  7. Python+Selenium - iframe定位

    元素在iframe中.在html当中,内嵌了另一个html (iframe) 分辨元素是否在iframe当中 在代码当中,从当前的html切换到iframe当中的html,然后在元素定位 切换方式:d ...

  8. 从性能角度帮你理解HTTP协议

    因为做性能测试分析的人来说,HTTP 协议可能是绕不过去的一个槛.在讲 HTTP 之前,我们得先知道一些基本的信息. HTTP(HyperText Transfer Protocol,超文本传输协议) ...

  9. TVM性能评估分析（六）

    TVM性能评估分析(六) Figure 1.  The workflow of development PC, compile, deploy to the device, test, then mo ...

  10. TVM性能评估分析（四）

    TVM性能评估分析(四) Figure 1.  Efficient Privacy-Preserving ML Using TVM Figure 2.  Motivation: Privacy-Pre ...