有谁知道为什么这个动画效果很好:
function setContainerHeight() {
$(".pagecontainer").animate({
height: '700px'
}, 500);
}
即固定高度,但这根本不动画?
function setContainerHeight() {
$(".pagecontainer").animate({
height: 'auto'
}, 500);
}
它仍然调整为自动大小,但没有动画,只是捕捉到它。
My code:
JS:
<script>
function setContainerHeight() {
$(".pagecontainer").animate({
height: 'auto'
}, 500);
}
$('.link').on('click', function(e){
$('.pagecontainer>div').fadeOut(0);
setContainerHeight();
$(this.getAttribute("href")).fadeIn();
});
</script>
CSS:
.pagecontainer {
min-height:450px;
width:80%;
min-width:800px;
padding:50px 0;
margin: 0 auto;
}
.pagecontainer>div{
display: none; /*wait until page needs to be faded in*/
padding-left:50px;
padding-right:50px;
position:relative;
}
HTML:
<div class="pagecontainer">
<a href="#page1" class="link">page 1</a>
<a href="#page2" class="link">page 2</a>
<a href="#page3" class="link">page 3</a>
<div id="page1">TONS OF TEXT HERE</div>
<div id="page2">A BIT OF TEXT HERE</div>
<div id="page3">BUNCH OF IMAGES</div>
</div>
有不同的 div 淡入/淡出,每个 div 需要不同的高度。页面的宽度也是动态的,但不需要动画,只需随视口拉伸/收缩。
Thanks.
DEMO http://jsfiddle.net/zbB3Q/ http://jsfiddle.net/zbB3Q/
Animate 不知道最终高度。您需要先获取它,然后制作动画,但要做到这一点,您必须快速设置高度并返回到制作动画之前的高度。
function setContainerHeight() {
var heightnow=$(".pagecontainer").height();
var heightfull=$(".pagecontainer").css({height:'auto'}).height();
$(".pagecontainer").css({height:heightnow}).animate({
height: heightfull
}, 500);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)