CODEWITHSUNDEEP
jqueryjquery-animate
fluxus
fluxus

Reputation: 559

jQuery animate from bottom to top

is there a way to animate one element's height(let's say div) from bottom to top? For example, let's say i have a div element with height of 15px.

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

And the css is:

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

I then use this jQuery:

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

Now just add more boxes(red,blue...) with the same css applied to each. The animation is working, but if applied over let's say greyBox, it also animates the red one, which is next to him. I tried changing from float:left to inline block, but no luck.

Just one thing, all of these boxes are wrapped in a absolutely positioned div with width:100%, bottom:0;left:0;

P.s. I created a fiddle, so it can be seen firsthand. Here it is

Many thanks,

Mirko

Upvotes: 1

Views: 9611

Answers (2)

ahren
ahren

Reputation: 16961

   $('.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/

You can counter-act the height by animating the marginTop of the sibling elements.

Otherwise you'd need to position them all absolute, with a bottom:0 declaration.

Upvotes: 2

jimr
jimr

Reputation: 11230

If you change float: left to display: inline-block and add vertical-align: bottom to the divs, it displays the way you want it to.

See: http://jsfiddle.net/AVXLq/1/

Upvotes: 1

Related Questions