jQuery анимировать снизу вверх

Question

Есть ли способ анимировать высоту одного элемента (допустим, div) снизу вверх? Например, допустим, у меня есть элемент div с высотой 15 пикселей.

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

И КСС:

.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: слева на встроенный блок, но не повезло.

Только одна вещь, все эти коробки завернуты в абсолютно позиционированный div с шириной: 100%, снизу: 0; слева: 0;

P.s. Я создал скрипку, поэтому ее можно увидеть на собственном опыте. 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 родственных элементов.

В противном случае вам необходимо будет разместить их все absolute, с объявлением bottom:0.

Answer 2

Если вы измените float: left на номер display: inline-block и добавьте vertical-align: bottom в divs, он отобразит так, как вы этого хотите.

См: http://jsfiddle.net/AVXLq/1/