jQuery slideDown（）将所有内容向下移动。怎么预防这个？

Question

jQuery slideDown()动画有一个小问题。触发此slideDown()时，它会将所有内容向下移动。

如何让<p>下方的所有内容滑落，保持静止？

注意：

我更喜欢一种解决方案，其中对<p>元素或slideDown调用或其他内容进行了更改。因为在我的实际页面中，<p>以下的内容中有很多正在向下移动，因此更改/重新安排所有内容对我来说需要更长的时间〜

演示@ JSFiddle： http://jsfiddle.net/ahmadka/A2mmP/24/

HTML代码：

<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

您可以position将该元素absolute：

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

演示：http://jsfiddle.net/A2mmP/25/

现有代码发生的事情是该元素以display:none;开头，因此在您将其滑入并更改为display:block之前，它根本不会占用任何空间，因此向下移动以下元素。

position:absolute在这个意义上它没有占用空间，它重叠：实际上在我的小提琴的更新版本中你可以看到下面的表格有轻微的重叠 - 你可以明显调整边缘上的边距桌子或任何使它符合你想要的方式。

Answer 2

您只需要给出.subscribe的固定高度。

.subscribe {
    height: 50px;
}

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

这是jsFiddle：http://jsfiddle.net/xL3R8/

Answer 3

解决方案

我们将滑动元素放在具有固定宽度的div元素中，以防止文档流受到幻灯片事件的影响。

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

问题在于你的CSS，它将呈现为块并在其滑入时将其他元素向下推。将其设置为绝对定位并将z-index更改为在前面或后面。

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

}

Fiddle

Answer 5

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

Answer 6

IMO是一个很好的用户界面练习，删除订阅按钮，然后在那里显示一条消息： “华友世纪！你已经订阅了” 例如 http://jsfiddle.net/UvXkY/

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

}）;

Answer 7

您面临的实际问题是display:none，这将删除元素p的空间

其中visiblity:hidden显示将解决此问题

即使它不会给出正确的slideDown效果，所以你可以使用绝对位置并为p元素保留一些空格来解决你的问题。

解决方案之一

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

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

FIDDLE DEMO