jQuery从下到上动画答案

【问题标题】：jQuery animate from bottom to topjQuery从下到上动画
【发布时间】：2012-06-13 22:47:26
【问题描述】：

有没有办法让一个元素的高度（比如说 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；

附：我创建了一个小提琴，所以可以直接看到它。 Here it is

非常感谢，

米尔科

【问题讨论】：

创建一个 jsFiddle，我相信有人会帮忙！
我猜你是对的。谢谢。
好的，这里是小提琴：link

标签： jquery jquery-animate

【解决方案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。

【讨论】：

肯定会的。我使用了.siblings() 选择器，因此它将选择同一父级中的所有其他框。
谢谢，我真的需要这个。我知道它适用于绝对定位，但它不适合我的需要。这太棒了！

【解决方案2】：

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

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

【讨论】：

谢谢，我确实改成了 inline-block，但我从未想过垂直对齐。如果我可以将两个答案都标记为正确，我会的，但之前的答案是正确的，所以只需几秒钟。