jquery 淡入淡出效果的简单实现

  样式:

  

复制代码 代码如下:

  <style type="text/css">

  #win {

  width: 98%;

  position: absolute;

  display: none;

  float:left;

  }

  

  /*控制关闭按钮的位置*/

  #close {

  margin-left: 155px;

  cursor: pointer;

  }

  </style>

  JS代码:

  

复制代码 代码如下:

  <script  type="text/javascript">

  function showwin() {

  $("#win").fadeIn("slow");

  }

  function hide() {

  $("#win").fadeOut("slow");

  }

  </script>

  html代码:

  

复制代码 代码如下:

  <div id="win">

  <div id="title">

  <table  style="width:100%; background:#78b3ef"  cellpadding="4" cellspacing="1" >

  <tr>

  <td>ID</td>

  <td>网站名</td>

  <td>域名</td>

  <td>百度收录</td>

  <td>是否存在链接</td>

  <td>操 作  <span id="close" onclick="hide()">关闭</span>   </td>

  </tr>

  <tr  style="background:#FFFFFF;">

  <td><span id="w_id"></span></td>

  <td><input id="txt_title" type="text" style="width: 237px" /></td>

  <td><input id="txt_classurl" type="text" style="width: 259px" /></td>

  <td><span id="w_baidu"></span></td>

  <td><input id="txt_exist" type="text" style="width: 83px" /></td>

  <td><input id="Button1" type="button" value="修 改" onclick="w_modify()" /></td>

  </tr>

  <tr style="background:#FFFFFF;"><td colspan="6"><a href="Default.aspx">返回首页</a></td></tr>

  </table>

  </div>

  </div>