jquery淡入淡出效果介紹

jquery淡入淡出效果介紹

 本篇文章主要是對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>