JQuery实现窗口淡入淡出
jquery.js
function showwin(){
var winNode=$("#win");
//方法一：使用jquery修改css
//winNode.css("display","block");
//方法二：使用jquery函数show（）
winNode.show("20");
//方法三：使用Jquery的fadeIn()方法
//winNode.fadeIn("slow");
}
function hide(){
var winNode=$("#win");
//winNode.css("display","none");
//winNode.hide("slow");
winNode.fadeOut("slow");
} jquery.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>float window</title>
<script type="text/javascript" src="jslib/jquerywin.js"></script>
<script type="text/javascript" src="jslib/jquery1.5.js"></script>
<link type="text/css" rel="stylesheet" href="css/win.css" />
</head>
<body>
<a onclick="showwin()" href="#">show float window</a>
<div id="win">
<div id="title">title<span id="close" onclick="hide()">X</span></div>
<div id="content"> this is a window！</div>
</div>
</body>
</html>win.css:
#win{
border:1px red solid;
width:300px;
height:200px;
position: absolute;
top:100px;
left:400px;
display:none;
}
#title{
background-color:blue;
color:yellow;
padding-left:3px;
}
#content{
padding-left:3px;
padding-top:3px;
}
#close{
margin-left:220px;
cursor:pointer;
}