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/

既存のコードで何が起こっているかというと、要素は as で始まる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プラクティスは、サブスクライブ ボタンを削除し、代わりに次のようなメッセージを表示することです。 

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

});

于 2013-07-11T13:09:11.173 に答える