0

我正在创建一个页面，它有一个隐藏的表单，当点击链接时，它应该动画到视图中。这是通过将表单绝对放置在容器之外，给容器一个相对位置，然后将表单动画化到它的顶部位置来实现的。

问题：

当我单击链接时，表单会显示在容器内容下方，将内容向上推，似乎忽略了“溢出：隐藏”属性。

然后，该表格动画起来，创造出一种奇怪的效果。它应该在内容上整齐地设置动画，就好像从底部出现一样，div而不会影响容器内容。

请参阅此 jsFiddle 进行演示。

HTML

<div class="theContainer">
 <h1>Welcome</h1>

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores erat.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et um dolor sit amet..</p> <a class="showForm" href="#show-form" title="Show the form">Show the form!</a>

<div class="theForm">
     <h2>The Form</h2>
    <p>Slitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
     <input autofocus="autofocus" max_length="255" type="text" name="email" id="id_email" />
</div>

CSS

.theContainer {
    background: lightblue;
    margin: 30px auto;
    padding: 5px 20px 20px 20px;
    width: 460px;
}
.theForm {
    display: none;
    background: pink;
    padding: 10px;
}

Javascript

$(document).ready(function () {
    var theContainer = $('.theContainer'),
        theContainerHeight = theContainer.height(),
        theForm = $('.theForm'),
        theLink = $('.showForm');

    theContainer.css({
        'height': theContainerHeight + 'px',
            'overflow': 'hidden',
            'position': 'relative'
    });

    theForm.css({
        'position': 'absolute',
        'top': theContainerHeight + 'px'
    });

    theLink.click(function () {
        theForm.css({
            'display': 'block'
        });
        theForm.animate({
            'top': '0'
        }, 1000);
    });
});
4

2 回答 2

1

css

.theContainer {
    background: lightblue;
    margin: 30px auto;
    padding: 5px 20px 20px 20px;
    width: 460px;overflow:hidden;
    position: relative;
}
.theForm {
    display: none;
    background: pink;
    padding: 10px;

}

js

$(document).ready(function () {
    var theContainer = $('.theForm'),
        theContainerHeight = theContainer.height(),
        theForm = $('.theForm'),
        theLink = $('.showForm');

    theContainer.css({
        'height': theContainerHeight + 'px',
            'overflow': 'hidden',
            'position': 'relative'
    });

    theForm.css({
        'position': 'absolute',
            'top': theContainerHeight + 'px'
    });

    theLink.click(function () {
        theForm.css({
            'display': 'block'
        });
        theForm.animate({
            'top': '-0px'
        }, 1000);
    });
});
于 2013-07-22T12:24:53.233 回答
1

问题是输入字段在显示时会自动获得焦点（至少在 Chrome 中；在不这样做的浏览器中，您不会遇到此问题），导致 div 向下滚动到将被隐藏的元素由overflow: hidden, 是否将 div 滚动到顶部。

手动添加theContainer.scrollTop(0);到您的点击功能可以避免该问题：

theLink.click(function () {
    theForm.show().animate({'top':0}, 1000);
    theContainer.scrollTop(0);
});

jsFiddle 演示

于 2013-07-22T12:00:53.483 回答