Question

我正在尝试滑动一个大的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 Norlyk Eriksen">Frederik Norlyk     Eriksen</h1>
        <h2>HTML, CSS, Javascript, C#</h2>
        <div class="hideBtn">
            hide
        </div>
    </div>
    <div class="header">

    </div>
    <div class="showBtn">
        show
    </div>

Answer 1

这可能是由于你的h1溢出其父级的上边距引起的。删除边距，用填充替换它或将overflow: hidden;添加到.hero div。

http://jsfiddle.net/C7RVB/

Answer 2

我不知道是什么原因造成的，但是我背景颜色的边框总是适合我。我把它放在英雄课上。希望它对你有用：）

Answer 3

您遇到的问题是由标头标记引起的。默认情况下，所有浏览器都有标题边距。您需要做的就是在标题标记中添加保证金：0以解决问题。我附上了下面固定代码示例的链接。

<h1 class="depth" style="margin:0;" title="Frederik Norlyk Eriksen">Frederik Norlyk     Eriksen</h1>

http://jsfiddle.net/9XHtT/

Answer 4

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

.hero {
  position: absolute;
}

jQuery，Div在使用.slideUp（）时表现得很奇怪;

4 个答案: