1

有没有办法从下到上动画一个元素的高度（比如说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 块，但没有运气。

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

Ps 我创建了一个小提琴，所以可以直接看到。这里是

非常感谢，

米尔科

4

2 回答 2

2 
   $('.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声明。

于 2012-06-10T23:44:10.640 回答
1

如果您更改float: left并display: inline-block添加vertical-align: bottom到 div，它会以您想要的方式显示。

见：http: //jsfiddle.net/AVXLq/1/

于 2012-06-10T23:49:48.693 回答