<!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. 『动善时』JMeter基础 — 16、JMeter配置元件【HTTP信息头管理器】

    目录 1.用于演示的项目说明 2.测试计划内包含的元件 3.HTTP请求界面内容 4.查看脚本执行结果 5.添加请求头信息(HTTP信息头管理器) 6.优先级说明 7.补充:常见请求头信息 JMete ...

  2. （原创）高DPI适配经验系列：（四）高DPI适配示例

    一.前言 光说不练假把式. 原理说再多,也不如一个例子直观明了.所以本篇文章就来通过一个例子演示一下高DPI适配的流程. 相信看完的你,一定会有所收获! 本文地址:https://www.cnblog ...

  3. [刷题] 1022 D进制的A+B (20分)

    思路 设t = A + B,将每一次t % d的结果保存在int类型的数组s中 然后将t / d,直到 t 等于 0为止 此时s中保存的就是 t 在 D 进制下每一位的结果的倒序 最后倒序输出s数组 ...

  4. MegaCli是一款管理维护硬件RAID软件，可以通过它来了解当前raid卡的所有信息，包括 raid卡的型号，raid的阵列类型，raid 上各磁盘状态

    MegaCli 监控raid状态 转载weixin_30344131 最后发布于2015-10-16 13:05:00 阅读数    简介 MegaCli是一款管理维护硬件RAID软件,可以通过它来了 ...

  5. 云计算OpenStack共享组件---信息队列rabbitmq（2）

    一.MQ 全称为 Message Queue, 消息队列( MQ ) 是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们. 消息传 ...

  6. windows 批量删除用户

    @echo off for %%I in (longxj,liujr,laijx,yuanyq,yanghui,xiejz,zhanlei,zifz,yuansy,denglf,lilan,chenz ...

  7. HTML 标签隐藏占用空间与不占用空间（Day_29）

    老是有些忘记或者搞混淆,今天写篇博客. 隐藏占用空间: 将标签的属性设置为: visibility:hidden; <input id="modifId" type=&quo ...

  8. Linux(CentOS 7) 安全加固之非业务端口服务关闭 postfix port 25

    目录 关闭TCP 25 端口对应的服务 1. 确认对应端口的进程 2. 查找与关闭对应服务 3. 确认结果,端口已关闭 关闭TCP 25 端口对应的服务 [0 root@Qvps /root] #ca ...

  9. 重新整理 .net core 实践篇—————配置系统之间谍[八]（文件监控）

    前言 前文提及到了当我们的配置文件修改了,那么从 configurationRoot 在此读取会读取到新的数据,本文进行扩展,并从源码方面简单介绍一下,下面内容和前面几节息息相关. 正文 先看一下,如 ...

  10. Elasticsearch分页查询

    global index global CLIENT index = "guajibao-ipused-2019.10.13" CLIENT = Elasticsearch(hos ...