0

リンクがクリックされたときに表示される非表示のフォームを持つページを作成しています。これは、フォームをコンテナーの外側に絶対に配置し、コンテナーに相対的な位置を与えてから、フォームをアニメーション化してその上部の位置に表示することによって実現されました。

問題：

リンクをクリックすると、コンテナ コンテンツの下にフォームが表示され、コンテンツが押し上げられ、「overflow: hidden」プロパティが無視されているように見えます。

その後、フォームがアニメーション化され、奇妙な効果が生まれます。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

問題は、入力フィールドが表示されたときに自動的にフォーカスを取得し (少なくとも Chrome では、これを行わないブラウザーではこの問題は発生しません)、div が非表示になる要素までスクロールダウンすることです。によって、overflow: hiddendiv が一番上にスクロールされていました。

クリック機能に手動で追加theContainer.scrollTop(0);すると、問題が回避されます。

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

jsFiddle デモ

于 2013-07-22T12:00:53.483 に答える