jquery动画效果

来源：互联网发布：数据恢复精灵注册机编辑：程序博客网时间：2024/06/06 05:51
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>    <script>        $(document).ready(function(){            $("button").click(function () {                $("#div1").fadeIn(3000);//淡入                $("#div2").fadeOut(3000);//淡出            });            $("#flip").click(function(){;//上滑下滑                $("#panel").slideToggle(2000);            });            $("#btn").click(function () {//动画                $("#dh").animate(                    {left:'250px',                      opacity:'0.5',                      height:'150px',                      width:'150px',                });                $("#dh").animate(                    {fontSize:'3em'},"5000");            });        });    </script>    <style>        #panel,#flip        {            padding:5px;            text-align:center;            background-color:#e5eecc;            border:solid 1px #c3c3c3;        }        #panel        {            height: 200px;            display:none;        }    </style></head><body><button>点击淡入 div 元素</button> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><div id="div2" style="width:80px;height:80px;background-color:burlywood;"></div><div id="flip" style="width: 300px;margin-left: 300px">点我下滑/上滑</div><div id="panel" style="width: 300px;margin-left: 300px">Hello world!</div><!--要展示的东西--><button id="btn">点击开始动画</button><div id="dh" style="background:#98bf21;height:100px;width:100px;position:absolute;">你好</div></body></html>
阅读全文
0 0