u投在线 -
直接调用一个accordion函数就Ok!
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Accordion - Default functionality</title>
<link type="text/css" href="theme/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.accordion.js"></script>
<script type="text/javascript">
$(function() {
$("#accordion").accordion();
});
</script>
</head>
<body>
<div class="demo">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
Optionally, toggle sections open/closed on mouseover.
</p>
<p>
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
usable without JavaScript.
</p>
</div><!-- End demo-description -->
</body>
</html>
tt白 -
clientHeight
然后递归，直到这个高度为0，或者直到这个高度为一个指定的高度
function showBox()
{
if (sb != null){
clearTimeout(sb);
}
if (cb != null) {
clearTimeout(cb);
}
var o = $("rbbox");
o.style.display = "block";
var H = parseInt(o.style.height)
o.style.height = (o.clientHeight + Math.ceil((55 - o.clientHeight) * 0.035)) + "px";
if (o.clientHeight < 55) {
sb = setTimeout(function(){showBox()}, 2);
}
else {
cb = setTimeout(function(){closeBox()}, 3800);
return;
}
}
function closeBox(msg)
{
if (cb != null) {
clearTimeout(cb);
}
var o = $("rbbox");
var dy = Math.ceil((parseInt(o.style.height) - 4) * 0.875).toString();
o.style.height = dy + "px";
if(o.clientHeight <= 5){
document.getElementById("rbbox").style.display = "none";
return;
}
cb = setTimeout(function(){closeBox()}, 3);
}
div#rbbox {
position: fixed;
right: 2px;
bottom: 2px;
height: 0px;
width: auto;
overflow: hidden;
border:1px #ff0000 solid;
background-color: #FFCC00;
text-align:justify;
}
奇石珠宝真君 -
利用JQUERY的animate动画效果实现
比如一个DIV用1秒时间向左滑动100像素就是
$("div").animate({left:"100px"},1000);
meira -
accordion是jquery中的动画效果语法
2楼的是纯js实现的动画
都可以实现
不过jquery的出现本身就是为了减少代码量，所以一楼的做法比较符合楼主想要的。