![](https://img-blog.csdn.net/20171010151852771?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTGl1eGJfemFv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
<!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>