0

大きなdivを非表示になるまでスライドさせようとしていますが、スライドアニメーションの最後で、divの上部がわずか1秒間下にスライドし始めます。divにdivの下部のみを移動させ、上部をロックしたままにするにはどうすればよいですか？これが私のコードです：

JavaScript

$(document).ready(function() {

$(".showBtn").hide();
$(".header").hide();

$(".hideBtn").click(function() {
    $(".hero").slideUp("slow", function() {
        $(".showBtn").show()
        $(".header").show();
    });
});

$(".showBtn").click(function () {
    $(".hero").slideDown();
    $(".showBtn").hide();
    $(".header").hide();
});

});

HTML

    <div class="hero">
        <h1 class="depth" title="Frederik">Frederik</h1>
        <h2>HTML, CSS, Javascript, C#</h2>
        <div class="hideBtn">
            hide
        </div>
    </div>
    <div class="header">
    
    </div>
    <div class="showBtn">
        show
    </div>
4

4 に答える 4

3

これはおそらく、親をオーバーフローする h1 の上部マージンが原因です。マージンを削除するか、パディングに置き換えるかoverflow: hidden;、.hero div に追加します。

http://jsfiddle.net/C7RVB/

于 2013-03-20T14:50:45.933 に答える
0

divを絶対/フロート配置して試すこともできます。

.hero {
  position: absolute;
}
于 2013-03-20T14:59:33.430 に答える
0

何が原因なのかはわかりませんが、背景と同じ色の境界線を配置すると、常にうまくいきました。私はそれをヒーロークラスに置きます。あなたのためにそれが可能であることを願っています:)

于 2013-03-20T14:52:07.387 に答える
0

あなたが抱えている問題は、ヘッダータグが原因です。デフォルトでは、すべてのブラウザーにヘッダーの余白があります。この問題を解決するには、先頭のヘッダー タグに margin:0 を追加するだけです。以下の修正コード例へのリンクを添付しました。

<h1 class="depth" style="margin:0;" title="Foo Bar">Foo Bar</h1>

http://jsfiddle.net/9XHtT/

于 2013-03-20T14:54:41.933 に答える