jQuery 效果

首先引入jquery

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

1.隐藏和显示

<p>若是你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>

$(document).ready(function(){
//隐藏
  $("#hide").click(function(){
    $("p").hide();
  });
//显示
  $("#show").click(function(){
    $("p").show();
  });
});

2.淡入淡出

<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

   淡入： 

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});

  淡出：

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});

 3.滑动

<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}

  展开： 

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});

   收拢：

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});