Question

I recently had a similar thread about this, but now I need to animate the top of a block.
As it is now, it animates from both bottom and top.

For example, I want it to shrink and so in order to get that I wrote:

$('#yellow').animate({height:'50%'},500);

But it shrinks both from top and bottom positions to center.

Is there a way to make it shrink by 50% only from the top position?

If it would of any help here are

CSS:

#yellow{
height:250px;
width:500px;
background-color:yellow;
}

HTML:

<div id='yellow'></div>

Answer 1

You may try http://docs.jquery.com/UI/Effects

Edited: Link Updated

See a small Demo: http://jsfiddle.net/rathoreahsan/ZMUz9/