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>
    勤劳一日,便得一夜安眠;勤劳一生,便得幸福长眠。
  • 相关阅读:
    checkbox radio select 选中总结
    vue-cli3总结
    数组总结
    Object 总结
    ajax总结
    canvas
    移动端事件
    微服务架构 SpringBoot(一)
    spring+activemq实战之配置监听多队列实现不同队列消息消费
    Integer 数值比较
  • 原文地址:https://www.cnblogs.com/zhaomengmeng/p/4681970.html
Copyright © 2011-2022 走看看