JQuery學(xué)習(xí)筆記-JQuery的動畫效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
}

body {
	font-size:13px;
	line-height: 130%;
	padding: 60px;
}

#panel{
	width: 300px;
	border: 1px solid #0050D0;
}

.head{
	padding: 5px;
	background: #96E555;
	cursor: pointer;
}

.content{
	padding: 10px;
	text-indent: 2em;
	border-top: 1px solid #0050D0;
	display: block;
	display: none;
}

.highlight{
	background: #FF3300
}

</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	/*
	$(function() {
		//show()  hide() 方法中傳入毫秒數(shù)達(dá)到動畫效果
		$(".head").toggle(function(){
			$(".content").show(500);
		},function(){
			$(".content").hide(500);
		});
	})
	*/
	//只改變高度
	/*
	$(function() {
		$(".head").toggle(function(){
			$(".content").slideDown(500);
		},function(){
			$(".content").slideUp(500);
		});
	})
	*/
	//只改變透明度
	/*
	$(function() {
		$(".head").toggle(function(){
			$(".content").fadeIn(500);
		},function(){
			$(".content").fadeOut(500);
		});
	})
	*/
	//toggle()可以切換元素是否可見
	//slideToggle通過高度變化來切換匹配元素的可見性
	//fadeToggle通過透明度來切換可見性
	//fadeTo把透明度以漸進(jìn)的方式調(diào)整為執(zhí)行的值（0-1之間）
	$(function() {
		$(".content").show(500);
		var i = 1;
		$(".head").click(function(){
			//$(".content").toggle(500);
			//$(".content").slideToggle();
			//$(".content").fadeToggle(1000);
			$(".content").fadeTo("slow", i);
			i = i - 0.1;
		});
	})
	
	//
</script>
</head>
<body>
	<div id="panel">
		<h6 class="head">什么是JQuery？</h6>
		<div class="content">
			JQuery是一個JavaScript庫。
		</div>
	</div>
    
</body>
</html>

創(chuàng)新互聯(lián)公司主營梁子湖網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā)公司,梁子湖h5微信小程序開發(fā)搭建,梁子湖網(wǎng)站營銷推廣歡迎梁子湖等地區(qū)企業(yè)咨詢

<script type="text/javascript"> 
$(document).ready(function() 
{ 
alert($(window).height()); //瀏覽器當(dāng)前窗口可視區(qū)域高度 
alert($(document).height()); //瀏覽器當(dāng)前窗口文檔的高度 
alert($(document.body).height());//瀏覽器當(dāng)前窗口文檔body的高度 
alert($(document.body).outerHeight(true));//瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin 
alert($(window).width()); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?nbsp;
alert($(document).width());//瀏覽器當(dāng)前窗口文檔對象寬度 
alert($(document.body).width());//瀏覽器當(dāng)前窗口文檔body的高度 
alert($(document.body).outerWidth(true));//瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin 
} 
) 
</script>

附件：http://down.51cto.com/data/2364959

標(biāo)題名稱：JQuery學(xué)習(xí)筆記-JQuery的動畫效果
URL網(wǎng)址：http://www.muchs.cn/article32/ghgssc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、微信小程序、網(wǎng)頁設(shè)計公司、軟件開發(fā)、靜態(tài)網(wǎng)站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)