Jquery 滑入滑出效果实现代码

  CSS

  

复制代码 代码如下:

  <style type="text/css">

  #divD{

  width:300px;

  height:100px;

  background-color:#CC99FF;

  }

  </style>

  Jquery代码

  

复制代码 代码如下:

  <script type="text/javascript" src="bg/js/jquery-1.4.2.min.js"></script>

  <script type="text/javascript">

  $(document).ready(function(){

  $("#btnFadein").bind("click",Fadein); //为btnFadein绑定click时间

  $("#btnFadeout").bind("click",Fadeout); //为btnFadeout绑定click时间

  })

  function Fadein(){

  $("#divD").slideDown("slow"); //滑入

  }

  function Fadeout(){

  $("#divD").slideUp("slow"); //滑出

  }

  </script>

  HTML

  

复制代码 代码如下:

  <body>

  <input type="button" value="滑入" id="btnFadein" />

  <input type="button" value="滑出" id="btnFadeout"/>

  <div id="divD">这是div</div>

  DIV

  </body>

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