jquery實現(xiàn)div的隱藏和顯示

$('#wsView')是要點擊的按鈕，$('#secondMenu')是要顯示或隱藏的內(nèi)容區(qū)域

 <div style="float:left;margin-left:5px">
	<a id="wsView" class="button button-primary" ></i>查看</a>
	<ul id="secondMenu" class="secondMenu" >
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

點擊按鈕顯示隱藏

$(function () { 
	$("#wsView").click(function () {
		if($('#secondMenu').is(':hidden')){
			$("#secondMenu").show();
		}else{
      		$("#secondMenu").hide();	
		}
	});
 })

點擊空白處隱藏div

	$(function () {  
	    $('#wsView').click(function (event) {  
	         //取消事件冒泡  
	         event.stopPropagation();  
	         //按鈕的toggle,如果div是可見的,點擊按鈕切換為隱藏的;如果是隱藏的,切換為可見的。  
	         $('#secondMenu').slideToggle('slow');  
	         return false;
	     });  
	     //點擊空白處隱藏彈出層，下面為滑動消失效果和淡出消失效果。
	     $(document).click(function(event){
	          var _con = $('#wsView');   // 設(shè)置目標區(qū)域
	          if(!_con.is(event.target) && _con.has(event.target).length === 0){ 
	            $('#secondMenu').slideUp('slow');   //滑動消失
	            //$('#secondMenu').hide(1000);          //淡出消失
	          }
	    });
	 })

.hide() //隱藏

.show() //顯示

.slideToggle()//切換滑入和滑出

.slideDown() //滑出

.slideUp() //滑入

.fadeIn() //淡入

.fadeOut() //淡出

.fadeToggle() //切換淡入和淡出

以上的這些動畫的方法,一般都可以使用兩個參數(shù),參數(shù)1:時間,參數(shù)2:回調(diào)函數(shù)

參數(shù)—時間:1000 毫秒—1秒

參數(shù)—時間:slow—慢,normal—正常,fast—快