0

我正在尝试滑动一个大 div 直到它被隐藏，但是在幻灯片动画的最后，div 的顶部开始向下滑动一秒钟。我如何强制 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

您遇到的问题是由标题标签引起的。默认情况下，所有浏览器都有页眉边距。您需要做的就是将 margin:0 添加到顶部的标题标签以解决该问题。我附上了下面固定代码示例的链接。

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

http://jsfiddle.net/9XHtT/

于 2013-03-20T14:54:41.933 回答
0

我不知道是什么原因造成的，但是放置与我的背景颜色相同的边框总是对我有用。我会把它放在英雄班上。希望它可能对你:)

于 2013-03-20T14:52:07.387 回答
0

您也可以尝试通过绝对/浮动定位您的 div，es：

.hero {
  position: absolute;
}
于 2013-03-20T14:59:33.430 回答