JQuery Slide down animation while keeping the DIV in its full size

jquery, jquery-animate, slidedown

Solution

http://jsfiddle.net/zmX5X/3/

I added another div and set `position: absolute;` and the bottom to 0, then I set the parent div to `position: relative;`

You may have to play around with the containers to get exactly what you want other than the slide down.

<body>
    <div style="width:400px;background-color:black;height: 200px;">
        <div id="error" style="position: relative; background-color:red; color:white; display:none; width:120px; height: 50px;">
            <div style="position: absolute; bottom: 0;">the error message</div>
        </div>
    </div>
    <div id="button" style="margin-top:20px; background-color:gray; width:70px; cursor:pointer;">click me!</div>
</body>

Problem

When I use Jquery to slide down a DIV, the div animatino looks like it is stretching/drawing the div from the top to the bottom. jsfiddle html ``` <body> <div style="width:400px;background-color:black; height:50px"> <div id="error" style="background-color:red; color:white; display:none; width:120px">the error message</div> </div> <div id="button" style="margin-top:20px; background-color:gray; width:70px; cursor:pointer;">click me!</div> </body> ``` js (jquery-ui) ``` $(document).ready(function(){ $("#button").click(function(){ $('#error').slideDown('slow', function () { // Animation complete. }); }); }); ``` I want the animation to look like the DIV is sliding in its full size (part of it hidden of course) from top to bottom. I'm adding an image to make it cleare what I want to achieve. Is there an option to make it by changing some of the CSS or Jquery arguments to achieve this. I know that JQuery id just playing with the height becayse my DIV has rounded corners at the bottom and they appear only at the end of the animation.

Original source