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

来源：互联网发布：安装至u盘 ubuntu 编辑：程序博客网时间：2024/05/16 03:54
<!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>    <!--默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！-->    <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>
0 0