前端基础 -JQuery之 相关效果

JQuery相关效果

• 显示和隐藏： show([毫秒值]) 显示 hide([毫秒值]) 隐藏 taggle([毫秒值]) 切换

• 滑入和滑出： slidedown([毫秒值]) 滑入 slideup([毫秒值]) 滑出 slideToggle([毫秒值]) 切换

• 淡出和淡出： fadeIn([毫秒值]) 淡入 fadeOut([毫秒值]) 淡出 fadeToggle([毫秒值]) 切换 fadeTo()

案例：

效果图：

代码：

Insert title here
	
		
		div{
			border:1px solid #000;
			width:100px;
			height:100px;
		}
	
	
	
	
		
		$(document).ready(function(){
			//显示和隐藏
			$("#b1").click(function(){
				//$("#b1Div").hide(2000);
				$("#b1Div").toggle(2000);
			})
			//滑入和滑出
			$("#b2").click(function(){
				//$("#b2Div").slideUp(2000);
				$("#b2Div").slideToggle(2000);
			})
			
			//淡入和淡出
			$("#b3").click(function(){
				//$("#b3Div").fadeOut(2000);
				//$("#b3Div").fadeToggle(2000);
				$("#b3Div").fadeTo(1000,0.5,function(){
					alert("淡化完成");
				})
			})
		});