jquery - How to set a box on bottom of a box?

Question

How do I have to set css position to animate box(in) that is in the box(out) which is not equal to box(in) height, from down to up.

What I am trying with animating is:

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

It expands downwards as hover right? I just want it to expand upwards. To be able to do that I have to set push it on bottom of box(out).

How do I do that? Please check: http://jsfiddle.net/DxEMT/

Answer 1

绝对位置#box-in inside #box-out with bottom: 0; 并给 #box-outposition-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/

Answer 2

尝试

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

演示：小提琴

Answer 3

尝试绝对位置.. LIVE DEMO

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

Answer 4

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


});

通过反转高度使其向上扩展？