[php学习十七]JQuery练习2－动画

亦凉 2022-09-24 13:29 222阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery效果练习</title>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(document).ready(function () {
                $("p").css({"margin-bottom":"0px"});
                $("#btn1").click(function () {
                    $("#divHide").toggle(1000,function () {
                        alert($(this).is(":hidden") == true ?"被隐藏了哦~!":"显示出来啦~!");
                    });
                });
                $("#btn2").click(function () {
                    $("#divFade").fadeToggle(1000,function () {
                        alert($(this).is(":hidden") == true ?"被隐藏了哦~!":"显示出来啦~!");
                    });
                });
                $("#btn3").click(function () {
                    $("#divslide").slideToggle(1000,function () {
                        alert($(this).is(":hidden") == true ?"被隐藏了哦~!":"显示出来啦~!");
                    });
                });
                $("#btn4").click(function () {
                    /*这个链式编程真是爽翻了~*/
                    $("#divanimate").css({position:"absolute"})
                            .animate({left: '300px'},1000)
                            .animate({height: '200px'}, 1000)
                            .animate({width: '200px'}, 1000)
                            .animate({fontSize:'40px'},1000)
                            .animate({fontSize:'15px'},1000)
                            .animate({width: '100px'}, 1000)
                            .animate({height: '100px'}, 1000)
                            .animate({left: '10px'},1000,function () {
                                $(this).css({position:'static'});
                            });
                });
    
            });
        </script>
    </head>
    <body>
    <div style="clear: both">
        <p><small>显示隐藏、淡出淡入、滑上滑下练习</small></p>
        <div id="divHide" style="float: left; width: 100px; height: 100px; background-color: blue"></div>
        <div id="divFade" style="float: left; width: 100px; height: 100px; background-color: rebeccapurple"></div>
        <div id="divslide" style="float: left; width: 100px; height: 100px; background-color: red"></div>
    </div>
    <div style="clear: both">
        <button id="btn1"  style=" left: 0; font-size: 15px">显示隐藏</button>
        <button id="btn2"  style=" left: 0; font-size: 15px">淡出淡入</button>
        <button id="btn3"  style=" left: 0; font-size: 15px">滑上滑下</button>
    </div>
    <div style="clear: both">
        <p><small>动画练习</small></p>
        
        <div id="divanimate"  style="float: left; width: 100px; height: 100px; background-color: darkolivegreen; ">Hello World</div>
    </div>
    <div style="clear: both">
        <button id="btn4" style="font-size: 15px">动画展示</button>
    </div>
    </body>
    </html>