zoukankan      html  css  js  c++  java
  • jquery动画(控制动画隐藏、显示时间轴)

    <!DOCTYPE html>
    <html>

    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
        .left div,
        .right div {
            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>

    红尘往事,一切随风!
  • 相关阅读:
    2021.07.01 学习总结
    2021.06.30 学习总结
    2021.06.29 学习总结
    2021.06.28 学习总结
    ubuntu 安装nginx报错./configure: error: SSL modules require the OpenSSL library
    Docker 启动alpine镜像中可执行程序文件遇到 not found
    docker基于cenots7 制作nginx镜像
    【Linux报错】VM虚拟机的CentOS7系统启动时报Generating /run/initramfs/rdsosreport.txt
    Docker Swarm 集群概念扩展
    Docker Swarm 集群弹性、动态扩缩容
  • 原文地址:https://www.cnblogs.com/xwenwu/p/13630039.html
Copyright © 2011-2022 走看看