1

slideDown()我对 jQuery动画有一个小问题。当它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;
}
4

7 回答 7

4

您可以position将该元素作为absolute：

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

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

您现有代码的情况是，元素开始时display:none;根本不占用任何空间，直到您将其滑入并将其更改为display:block，因此以下元素向下移动。

从position:absolute这个意义上说，它不会占用空间，它会重叠：事实上，在我更新的小提琴版本中，您可以看到下面的表格略有重叠 - 您显然可以调整表格上的边距或其他任何东西以使其适合你想要的方式。

于 2013-07-11T13:01:57.307 回答
2

您所需要的只是为您的 .subscribe 提供一个固定的高度。

.subscribe {
    height: 50px;
}

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

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

于 2013-07-11T13:07:24.580 回答
1

解决方案

我们将滑动元素放在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;
}

现场演示

于 2013-07-11T13:16:53.867 回答
0

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

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

}

小提琴

于 2013-07-11T13:05:00.573 回答
0 
 .subscribe p {
     display: none;
     margin :0px;    
 }
于 2013-07-11T13:05:05.180 回答
0

IMO 一个好的 UI 做法是删除订阅按钮，而是在那里显示一条消息，例如：“万岁！您已被订阅”，例如 http://jsfiddle.net/UvXkY/

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

});

于 2013-07-11T13:09:11.173 回答
0

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

asvisiblity:hidden和 show 将解决这个问题

即使它不会产生适当的slideDown效果，所以您可以使用绝对位置并为元素保留一些空间p将解决您的问题。

解决方案之一

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

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

小提琴演示

于 2013-07-11T13:25:47.357 回答