我有一组按钮,单击这些按钮时,页面上的说明会淡出,所需的内容会淡入。div 还使用 jQuery .animate() 函数进行扩展。当 div 完成扩展时,高度会跳变短。我做了一个 jsFiddle,但它在那里工作正常。因此,它必须与我的其余内容有关。
http://northviewhigh.com/index/fbla/1213/eb/styles.css - CSS 文件
[同上,不能发更多链接]/eb/jquery/scripts.js jQuery 文件
这是代码:
<div id="tixcontainer">
<div class="tixinfo startinfo">
Select a ticket type to begin ordering your graduation tickets.
</div>
<div class="tixinfo hidden gradinfo">
You selected "Graduate"
</div>
</div>
#tixcontainer {
width:100%;
height:100px;
}
.tixinfo {
position:absolute;
top:629px;
}
.startinfo {
height:100px;
}
.gradinfo {
height:200px;
}
function expandTix(newHeight,cat) {
$('.startinfo').fadeOut();
$('#tixcontainer').animate({
height: newHeight
}, 'slow', function() {
$('.'+cat+'info').fadeIn();
});
}
$('.gradbutton').click(function() {
dimAllBut('grad');
expandTix(200,'grad');
});