《JavaWeb---JQuery淡入淡出效果的实现》

来源：互联网发布：怎样判断网络通不通编辑：程序博客网时间：2024/05/16 13:55

<!DOCTYPE html><html>  <head>    <title>显示隐藏窗口</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <script type="text/javascript" src="jslib/jquery.js"></script>    <script type="text/javascript" src="jslib/win.js"></script>    <link type="text/css" rel="Stylesheet" href="css/win.css">  </head>    <body>  <a href="javascript:void(0)" onclick="show()">显示一个窗口</a>  <div id="win">    <div id="title">   这是标题栏   <span id="close" onclick="hide()">X</span>    </div>    <div id="content">   我是窗口内容！    </div>  </div>  </body></html>

css#win{border: 1px solid red;width: 300px;height: 200px;position : relative;top:  100px;left: 350px;display: none;}#title{background-color: #D6C8F7;padding-left: 3px;}#content{padding-left: 3px;}#close{margin-left: 195px;cursor: pointer;}

function show() {//得‘窗体’对象var win = $("#win");//调用JQuery的方法以淡出的方式显示窗体win.fadeIn("slow");}function hide() {var win = $("#win");win.fadeOut("slow");}