JQuery2

效果

1）顯示、切換、隱藏：

<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
      div.hide();  
   }); /*隱藏*/
   $("#b2").click(function(){
      div.show();
   }); /*顯示*/
   $("#b3").click(function(){
      div.toggle();
   }); /*切換，若當前爲隱藏則改成顯示，若當前爲顯示則改成隱藏*/
   $("#b4").click(function(){
      div.show(1000);
   }); /*延遲1000ms顯示*/
   $("#b5").click(function(){
      div.hide(1000);
   }); /*延遲1000ms隱藏*/
   $("#b6").click(function(){
      div.toggle(1000);
   }); /*延遲1000ms切換*/
  
});
   
</script>

2）向上滑動、向下滑動、滑動切換、滑動隱藏

<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
      div.slideUp();
   });  /*向上滑動*/
   $("#b2").click(function(){
      div.slideDown();
   }); /*向下滑動*/
   $("#b3").click(function(){
      div.slideToggle();
   });  /*滑動切換*/
   $("#b4").click(function(){
      div.slideUp(2000);
   }); /*延遲向上滑動*/
   $("#b5").click(function(){
      div.slideDown(2000);
   });  /*延遲向下滑動*/
   $("#b6").click(function(){
      div.slideToggle(2000);
   });  /*延遲滑動切換*/
   
});
    
</script>

3）淡入淡出：