JavaScript: jquery框架的滑出滑入的动画效果是怎么实现的?
4个回答
展开全部
直接调用一个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>
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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;
}
然后递归，直到这个高度为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);
比如一个DIV用1秒时间向左滑动100像素就是
$("div").animate({left:"100px"},1000);
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
accordion是jquery中的动画效果语法
2楼的是纯js实现的动画
都可以实现
不过jquery的出现本身就是为了减少代码量，所以一楼的做法比较符合楼主想要的。
2楼的是纯js实现的动画
都可以实现
不过jquery的出现本身就是为了减少代码量，所以一楼的做法比较符合楼主想要的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
