javascript - 当使用 jQuery 从溢出区域外部对子元素进行动画处理时，元素不遵守隐藏的溢出

Question

我正在创建一个具有隐藏表单的页面，当单击链接时，该表单应该以动画形式出现在 View 中。这是通过将表单绝对放置在容器外部，给容器一个相对位置，然后将表单设置为在其顶部位置可见的动画来实现的。

问题:

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

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

请参阅 this jsFiddle for demonstration .

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);
    });
});

Answer 1

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

手动添加 theContainer.scrollTop(0); 到您的点击函数可以避免这个问题:

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

jsFiddle Demo