12-解决方案

7.2.2　解决方案

1．HTML

我们需要绝对定位打算以动画显示的元素，使其保持在底部位置，这样在显示的时候它就会向上滑动。

为此，需要将动画元素包装在另一个 <div> (或者适合设计的其他元素)中，设置 position:relative 样式。(也可以是 position: absolute 。只需要一个事先定义的位置，以便触发 #revealUp 上的 position: absolute 样式，进行相对定位；但是，因为我们希望文档流程正常，所以使用了 position:relative。 ）

<div class="box">
　 <div id="revealUp">
　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
　　　eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
　 </div>
</div>

2．CSS

现在，需要为 box 元素设置一个相对位置，这样才能相对于它绝对定位 #revealUp ：

.box {
　 position: relative;
}
#revealUp {
　 position: absolute;
　 overflow: hidden;
　 display: none;
　 bottom: 0;
　 background-color: #c00;
　 height: 0;
}

3．jQuery

可以根据元素的高度切换 #revealUp 。我们打算花费更长的时间显示增加高度的动画（通过检查当前高度）而不只是使用 slideToggle() ——我们将在7.2.3节中提及这么做的原因：

$(document).ready(function () {
　 $('#animate').click(function () {
　　　var $box = $('#revealUp');
　　　if ($box.height() > 0) {
　　　　 $box.animate({ height : 0 });
　　　} else {
　　　　 $box.animate({ height : '100%' });
　　　}
　 });
});