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

StackOverflow https://stackoverflow.com/questions/18339240

Question

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.

enter image description here

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.

Was it helpful?

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>

OTHER TIPS

Just add $('#your-text').slideDown() with the same effect setting as the parent div

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top