jQuery 从下到上制作动画

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 更改为内联 block ，但没有成功。

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

P.s.我创建了一个 fiddle ，所以可以直接看到它。 Here it is

非常感谢，

米尔科

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 进行动画处理来抵消高度。

否则，您需要将它们全部绝对定位，并使用bottom:0声明。