基础——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>

O(∩_∩)O每天进步一点点O(∩_∩)O 该BLOG供个人记录学习笔记，如有错误欢迎指出！

(请您对文章做出评价)

posted @ 2010-03-29 20:45 H_J_H 阅读(286) 评论(0) 收藏举报

刷新页面返回顶部

基础——Jquery制作滑入滑出

公告