jquery - 如何在盒子底部设置一个盒子？

Question

我如何设置 css 位置以动画 box(out) 中不等于 box(in) 高度的 box(in)，从下到上。

我正在尝试制作动画的是:

$('#box-out').hover(function(){
    $('#box-in').animate({height: '400px'},2000);
});

它会随着悬停向下扩展吗？我只是想让它向上扩展。为了能够做到这一点，我必须将它推到盒子的底部(出)。

我该怎么做？请查收:http://jsfiddle.net/DxEMT/

Answer 1

绝对位置#box-in inside #box-out with bottom: 0;并给出#box-out position-relative这样就可以了。

#box-out{
   width:300px; 
   height:400px; 
   border:1px solid black; 
   position: relative;
} 
#box-in{
   float:left; 
   width:300px; 
   height:100px; 
   background:red; 
   position:absolute;
   bottom:0px;
} 

其余部分与您现有的代码相同。

工作示例:http://jsfiddle.net/DxEMT/2/