《JavaWeb-JQuery淡入淡出成效的实现》 _Web前端

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

<!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");
}