Question

有没有办法从下到上动画一个元素的高度（让我们说div）？例如，假设我有一个高度为15px的div元素。

<div class='greyBox'>
<p>Example text</p>
</div>

而css是：

.box{height:15px;width:60px;backgroundColor:#000;float:left;margin-left:20px;}
.box p{opacity:0;}

然后我使用这个jQuery：

 $('.greyBox').mouseenter(function(){
     $(this).animate({height:'50px'},700).children('p').animate({opacity:1},200);
     });

现在只需添加更多框（红色，蓝色......），每个框都应用相同的css。动画正在运行，但是如果应用于greyBox，那么它也会动画旁边的红色动画。我尝试从float：left更改为inline block，但没有运气。

只有一件事，所有这些盒子都包裹在一个绝对定位的div中，宽度为：100％，底部：0;左：0;

P.S。我创造了一个小提琴，所以可以直接看到。 Here it is

非常感谢，

的Mirko

Answer 1

   $('.greyBox').mouseenter(function(){

   $(this).animate({height:'50px'},700).children('p').animate({opacity:1},200);
       $(this).siblings().animate({marginTop: '35px'}, 700)

   });

http://jsfiddle.net/BsPju/1/

您可以通过设置兄弟元素marginTop的动画来反击高度。

否则，您需要使用absolute声明对所有bottom:0进行定位。

Answer 2

如果您将float: left更改为display: inline-block并将vertical-align: bottom添加到div，则会显示您希望的方式。

请参阅：http://jsfiddle.net/AVXLq/1/

jQuery动画从下到上

2 个答案: