admin管理员组

文章数量:1317897

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: /

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;
}

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/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;
}

• javascript
• jquery
• html
• css
• slidedown

Share Improve this question Follow asked Jul 11, 2013 at 12:58 AhmadAhmad 13.4k3131 gold badges102102 silver badges152152 bronze badges 2

• 1 Try position: absolute; on the p-tag. – dislick Commented Jul 11, 2013 at 13:02
• 1 Another alternative would be to set the elements whose are sliding to inside a div with a fixed width and height, with overflow:hidden; to prevent its resizing. The page flow would never actualy move. – Jeff Noel Commented Jul 11, 2013 at 13:10

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

You can position that element as absolute:

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

Demo: http://jsfiddle/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.

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/xL3R8/

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

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

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

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/UvXkY/

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

});

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

本文标签： javascriptjQuery slideDown() moves everything below downwards How to prevent thisStack Overflow