zoukankan      html  css  js  c++  java
  • animate实现动画效果

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--<script src="../../JQuery/jquery-2.1.4.min.js"></script>-->
        <script src="../../JQuery/jquery-1.4.2.min.js"></script>
        <link href="../../CSS/2-7.css" rel="stylesheet" />
        <title>使用animate实现动画效果</title>
        <script type="text/javascript">
    
            $(function () {
                $("#btn").click(function () {
                    $("#box").animate({ height: "500px" }); //此方法操作div,可以使div样式不会还原,操作span则会在动画效果完成后还原之前样式。
                }
                )
                $(".btn1").click(function () {
                    $("#box").animate({ height: "300px" }); //此方法操作div,可以使div样式不会还原,操作span则会在动画效果完成后还原之前样式。
                }
           )
            })
        </script>
    </head>
    <body>
        <div>  
            <span id="spnMove">Span Move</span>
        </div>
        <div id="box" style="background: #98bf21; height: 100px;  100px; margin: 6px;"></div>
        <button class="btn1">Animate</button>
        <input type="button" id="btn" value="animate" />
    </body>
    </html>
    勤劳一日,便得一夜安眠;勤劳一生,便得幸福长眠。
  • 相关阅读:
    NIO简述
    函数式编程
    ReadWriterLock读写锁
    Semaphore工具类使用
    CyclicBarrier工具类使用
    CountDownLatch工具类使用
    创建VUE+Element-UI项目
    <slot>插板使用
    Spring面试题
    实现定时任务的几种方式
  • 原文地址:https://www.cnblogs.com/zhaomengmeng/p/4681970.html
Copyright © 2011-2022 走看看