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>

时间: 2024-11-03 22:02:19

jQuery 页面隐藏折叠效果的相关文章

Jquery页面加载效果

1.说明 Jquery页面加载可实现异步请求时提示"请稍后,正在加载..."效果,同步请求不可用(即ajax async: false).本文地址:http://www.cnblogs.com/lengzhan/p/6423312.html 2.代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

jquery页面隐藏和展开之间切换

html页面: <p id="myp4">默认情况下,这段话是隐藏的,点击按钮以后,这段话就展开,并且按钮上的值改变</p> <button id="b6" >展开</button> js页面: 1 $(document).ready(function () { 2 $("#b6").click(function () { 3 $("#myp4").toggle(); 4 var

BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面. Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的.它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrolls

Bootstrap基础7(标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果)

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>标签.徽章.

【转】Jquery折叠效果

转自:http://www.cnblogs.com/clc2008/archive/2011/10/25/2223254.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

jQuery页面滚动监听事件及高级效果插件

jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scroll_demo.html 2. Scrolld(更不好用)https://github.com/charliegeiger89/Scrolld.js#readme 3. Animate Scroll(参数太少,不好用)https://github.com/ramswaroop/animatescrol

jquery页面滚动显示浮动菜单栏锚点定位效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>jQuery

Jquery 同个类名中点击的显示其他隐藏的效果

页面的DOM结构如下: <tr> ...... <td><a href="javascript:void(0)" class="c_detail2">查看详情</a></td> </tr> <tr class="detail2"> <td class="intro" colspan="7"> ...... <

jquery垂直展开折叠手风琴二级菜单

最近新开发一个简单项目,用到左侧两级的菜单.习惯性的去网上扒jquery手风琴效果,结果悲剧了好久…… 是该认认真真去学jquery,练习自己写动画效果了.从理解别人代码开始吧! 注:jquery-1.8.3.min.js需要下载文件放到同级名为js的文件夹里. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery垂直展开折叠手风琴效果</title> <s