基础——Jquery制作滑入滑出

CSS

1 <style type="text/css">
2     #divD{
3     width:300px;
4     height:100px;
5     background-color:#CC99FF;
6     }
7 </style>
Jquery

Jquery代码 
 1 <script type="text/javascript" src="bg/js/jquery-1.4.2.min.js"></script>
 2  <script type="text/javascript">
 3     $(document).ready(function(){
 4         $("#btnFadein").bind("click",Fadein);        //为btnFadein绑定click时间
 5         $("#btnFadeout").bind("click",Fadeout);        //为btnFadeout绑定click时间
 6     })
 7     
 8     function Fadein(){
 9         $("#divD").slideDown("slow");        //滑入
10     }
11     
12     function Fadeout(){
13         $("#divD").slideUp("slow");            //滑出
14     }
15 </script>
HTML

1 <body>
2     <input type="button" value="滑入" id="btnFadein" />
3     <input type="button" value="滑出" id="btnFadeout"/>
4     <div id="divD">这是div</div>
5     DIV
6 </body>

 

posted on 2010-03-26 11:09  donliu  阅读(1130)  评论(0)  编辑  收藏  举报

导航