用AJAX实现淡入淡出特效（回钦波）-CSDN博客

本文链接：https://blog.csdn.net/huiqinbo/article/details/83552672

0.jquery.js我放到下面你可以下载下来
1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="css/windowfade.css">
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/windowfada.js"></script>

</head>
<body>

<a οnclick="dianji()" href="#">来点击我吧！</a>

<div id="win">
<div id="title">我是标题<span id="close" οnclick="hide()">X</span></div>
<div id="content">我是内容</div>
</div>

</body>
</html>

2.
#win{
position :absolute;
top: 220px;
left:400px;
border: 1px red solid ;
width:300px;
height:400px;
display :none;
}
#x{
position:absolute;
left:340px;
}
#close {
/*使关闭按钮向右侧移动*/
margin-left: 158px;
/*让鼠标进入时可以显示小手，告知用户可以点击操作*/
cursor: pointer;
}

3.
function dianji(){
var win=$("#win");
win.fadeIn("slow");
}
function hide(){
var win =$("#win");
win.fadeOut("slow");

}

出入：回钦波（QQ：444084929 个人主页：http://www.yezhong.net）