Search code examples
jquerycolorsjquery-animateblock

jQuery animate only the top of value 'height'

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>
Solution

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

    Edited: Link Updated

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