jQuery 頁面隱藏折疊效果
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="JS/jquery-1.7.2.min.js"></script>
<style type="text/css">
#d1 {
line-height: 50px;
height: 50px;
width: 300px;
background-color: red;
overflow: hidden;
}
#d2 {
line-height: 50px;
height: 50px;
width: 300px;
background-color: yellow;
overflow: hidden;
}
#d3 {
line-height: 50px;
height: 50px;
width: 300px;
background-color: blue;
overflow: hidden;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="d1">
配置方面，新車配備了真皮座椅、全景天窗、大尺寸液晶顯示屏、全景影像、遙控駕駛、PM2.5綠凈系統、ATS全地形模式、移動電站等配置。
動力方面，新車將繼續沿用現款的2.0T渦輪增壓發動機與兩個電動機組成的混合動力系統，最大輸出功率為205馬力。傳動系統與發動機匹配的是6速雙離合變速箱。其0-100km/h加速時間為4.9秒。值得一提的是，新車兼具混動（HEV）和純電（EV）兩種模式，純電續航裏程為80公裏。（文/汽車之家 陳碩）
</div>
<div id="d2">
路測得分：100
特斯拉 Model S P85D 於年中進行了重新設計，這款運動型4門5座電動車搭載了90千瓦時的電池組，號稱續航裏程可達294英裏。另外，還有85千瓦時的配置可供消費者選擇，經過測試，完成5小時充電之後的續航裏程可以達到220英裏。Model S P85D的性能非常卓越，加速之快令人震驚，操作起來也非常順暢，舒適感油然而生。類似於ipad的中央控制中心功能雖然其全，但也會讓駕駛員產生分心。此外，Model S P85D同時也配有全輪驅動和主動安全系統。但Model S P85D也有一些缺點，包括難以進入的車廂，可視性及續航裏程受到限制，尤其是在寒冷的天氣情況下。
</div>
<div id="d3">
路測得分：99
在豪華型轎車當中，寶馬7系一直不敵奔馳S級轎車，但現款7系轎車無論是駕駛的穩定性、動力系統的順暢感，操作便利性、內飾的豪華性都大大超乎人們的意料。基本款740i搭載的是3.0升6缸渦輪增壓引擎，而最具代表性的750i則搭載的是4.4升V8渦輪增壓引擎，最大功率可達445hp，采用的是全輪驅動系統。750i的車廂十分靜謐，在細節設計和座椅的舒適性上是其他車型難以匹敵的。此外，內飾的質量也讓人眼前一亮，內置木飾、皮革、鋁制設計等使這款車型的現代感盡顯。
</div>
<div></div>
</form>
</body>
</html>
<script type="text/javascript">
//這裏為什麽要這麽寫?
//獲取auto高度的時候會執行一遍auto高度變化的代碼,變成頁面加載完成後頁面中的div高度為auto高度,
//這裏需要在後面讓他再變回默認高度就可以了, 也不會出現閃屏的問題.
var autoHeight1 = $("#d1").css(‘height‘, ‘auto‘).height();
var height1 = $("#d1").css(‘height‘, ‘50‘).height()
$("#d1").toggle(
function () { $("#d1").animate({ height: autoHeight1 }, 500); },
function () { $("#d1").animate({ height: "50" }, 500); });
var autoHeight2 = $("#d2").css(‘height‘, ‘auto‘).height();
var height1 = $("#d2").css(‘height‘, ‘50‘).height()
$("#d2").toggle(
function () { $("#d2").animate({ height: autoHeight2 }, 500); },
function () { $("#d2").animate({ height: "50" }, 500); });
var autoHeight3 = $("#d3").css(‘height‘, ‘auto‘).height();
var height1 = $("#d3").css(‘height‘, ‘50‘).height()
$("#d3").toggle(
function () { $("#d3").animate({ height: autoHeight3 }, 500); },
function () { $("#d3").animate({ height: "50" }, 500); });
</script>
jQuery 頁面隱藏折疊效果