Question

如何将css位置设置为框（out）中的动画框（in），该框不等于box（in）height，从下到上。

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

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

随着悬停向右扩展？我只是想让它向上扩展。为了能够做到这一点，我必须将它推到盒子底部（out）。

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

Answer 1

绝对位置＃box-in＃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/

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;
}

演示：Fiddle

Answer 3

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


});

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

Answer 4

尝试绝对位置.. 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;
}

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

4 个答案: