美文网首页
jquery动画效果

jquery动画效果

作者: 沫明 | 来源:发表于2018-09-13 21:32 被阅读0次

    案例

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script src="./js/lib/jquery2.2.4/jquery-2.2.4.min.js"></script>
            <style>
                #box{
                    width: 400px;
                    height: 400px;
                    background: #27B597;
                }
            </style>
        </head>
        <body>
        <button id="btn1">显示--动画效果</button>
        <button id="btn2">隐藏--动画效果</button>
        <button id="btn3">显示/隐藏--动画效果</button>
        <button id="btn4">卷帘拉开--动画效果</button>
        <button id="btn5">卷帘收起--动画效果</button>
        <button id="btn6">卷帘显示/隐藏--动画效果</button>
        <button id="btn7">透明显示--动画效果</button>
        <button id="btn8">透明隐藏--动画效果</button>
        <button id="btn9">透明显示/隐藏--动画效果</button>
        <button id="btn10">透明指定透明度--动画效果</button>
        <button id="btn11">自定义动画效果</button>
        <div id="box"></div>
        
        <script>
            $(function () {
                //给按钮绑定单击事件,测试各种动画效果:熟悉API文档
                //API:application program interface 应用程序开发接口 文档
                $("#btn1").click(function(){
                    $("#box").show(2000);//show("fast"/"slow"/1000)
                });
        
                $("#btn2").click(function(){
                    $("#box").toggle(2000);//show("fast"/"")
                })
            })
        </script>
        </body>
        </html>

    相关文章

      网友评论

          本文标题:jquery动画效果

          本文链接:https://www.haomeiwen.com/subject/obiggftx.html