jQuery slideDown() moves everything below downwards. How to prevent this?

Question

I have a small problem with jQuery slideDown() animation. When this slideDown() is triggered, it moves all stuff below downwards too.

How do I make all the stuff below the <p> being slid down, remain stationary ?

Note:

I would prefer a solution where the change is done to the <p> element, or to the slideDown call or something. Because in my actual page, there is a lot of stuff below the <p> being slid down, so changing/re-arranging all of them will take much longer for me ~

Demo @ JSFiddle: http://jsfiddle.net/ahmadka/A2mmP/24/

HTML Code:

<section class="subscribe">
    <button id="submitBtn" type="submit">Subscribe</button>
    <p></p>
</section>
<div style="padding-top: 30px;">
    <table border="1">
        <tr>
            <td>This table moves</td>
            <td>down when</td>
        </tr>
        <tr>
            <td>slideDown()</td>
            <td>is activated !</td>
        </tr>
    </table>
</div>

JavaScript:

$(function () {
    $("#submitBtn").click(function (event) {
        $(".subscribe p").html("Thanks for your interest!").slideDown();
    });
});

CSS:

.subscribe p {
    display: none;
}

Answer 1

All you need is to give a fixed height of your .subscribe.

.subscribe {
    height: 50px;
}

.subscribe p {
    margin: 0px;
    display: none;
}

Here is the jsFiddle : http://jsfiddle.net/xL3R8/

Answer 2

You can position that element as absolute:

.subscribe p {
    display: none;
    position : absolute;        // add this line
}

Demo: http://jsfiddle.net/A2mmP/25/

What's happening with your existing code is that the element starts out as display:none; so it doesn't take up any space at all until you slide it in and it is changed to display:block, hence the movement down of the following elements.

With position:absolute it doesn't take up space in that sense, it overlaps: in fact in my updated version of your fiddle you can see a slight overlap into the table underneath - you can obviously tweak margins on the table or whatever to make it fit the way you want.

Answer 3

Solution

We will put the sliding element in a div element with a fixed width, preventing the document flow from being affected by the slide event.

HTML

<section class="subscribe">
    <button id="submitBtn" type="submit">Subscribe</button>
    <!-- this is the modified part -->
    <div><p></p></div>
</section>

CSS

.subscribe div
{
    /* We force the width to stay a maximum of 22px */
    height:22px;
    max-height:22px;
    overflow:hidden;
}
.subscribe div p {
    display: none;
    /* We reset the top margin so the element is shown correctly */
    margin-top:0px;
}

Live Demo

Answer 4

The problem is your CSS, it will render as block and push the other elements down when it slides in. Set it to be absolutely positioned and change the z-index to be in front, or behind.

.subscribe p {
display: none;
position: absolute;
z-index: 100;

}

Fiddle

Answer 5

 .subscribe p {
     display: none;
     margin :0px;    
 }

Answer 6

IMO a good UI practice would be to, remove the subscribe button, and instead show a message there like : "Hurray! You have been subscribed" e.g http://jsfiddle.net/UvXkY/

$(function () {
$("#submitBtn").click(function (event) {
    $("#submitBtn").slideToggle('slow', function(){
        $(".subscribe p").html("Thanks for your interest!").slideDown();    
    });
});

});

Answer 7

The actual problem your facing is display:none which will remove the space for the element p

where as visiblity:hidden and showing will get ride of this problem

Even though it will not give the proper slideDown effects so you can use the position absolute and keep some spaces for the p element will solve your problem.

one of the solution

.subscribe p {
   position:absolute;
    display:none;
}

.subscribe
{
    position:relative;
    height:50px;
}

FIDDLE DEMO