1

完全なスペースを占める 2 つの div がある Web ページがあります。1 つの div が左にスライドし、右からスライドする他の div に置き換えられるように、それらの間の JQueryUI スライド遷移で一度に 1 つずつ表示したいと考えています。残念ながら、現時点では両方のアニメーションが同時に発生するため、2 番目の div が最初の div の下に表示され、アニメーションの最後で最初の div を置き換えるために上にスライドします。スライド モーションがシームレスに発生するように、2 番目の div を配置するにはどうすればよいですか?

コード：

<script type="text/javascript">
    $('#schedule').hide();
    $( '#changer' ).click(function() {
            $("#roster").toggle( "slide", {direction: "left"}, "fast" );
            $("#schedule").toggle("slide", { direction: "right"}, "fast");

            if ($("#changer").html() == 'Schedule View')
                $("#changer").html('Roster View');
            else
                $("#changer").html("Schedule View");
        });
</script>
4

2 に答える 2

3

このフィドルを考えてみましょう: http://jsfiddle.net/FkNa2/2/

関連するコードは、css の配置です。

// html
<p>some content here </p>
<div class="container">
    <div id="div1"></div>
    <div id="div2"></div>
</div>
<button>Toggle</button>

// css
#div1{
    width: 500px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 0px;
    left: 0px;
}

#div2{
    width: 500px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
}

.container {
    width: 800px;
    position: relative;
    left: 100px;
    height: 100px;
}

秘訣は、両方の div がビューポート内で同じ位置を占めるようにすることです。これは、両方を同じ座標に絶対的に配置することによって行われます。これらの座標は外側の div に相対的であることに注意してください。この質問への回答を参照してください https://stackoverflow.com/a/10426717/30007

「相対」ポジショニングと「絶対」ポジショニングはどちらも、フレームワークが異なるだけで、実際には相対的です。「絶対」配置は、別の囲んでいる要素の位置に相対的です。「相対」ポジショニングは、ポジショニングなしで要素自体が持つ位置に相対的です。

どちらを使用するかは、ニーズと目的によって異なります。「相対」位置は、要素の流れの中である位置から要素を移動したい場合に適しています。たとえば、一部の文字を上付きの位置に表示する場合などです。「絶対」配置は、別の要素によって設定された座標系に要素を配置する場合に適しています。たとえば、画像にテキストを「オーバープリント」する場合などです。

特殊な方法として、変位なし (位置: 相対を設定するだけ) の「相対」ポジショニングを使用して、要素を基準フレームにします。これにより、その内部 (マークアップ内) の要素に対して「絶対」ポジショニングを使用できます。

于 2013-04-22T03:27:17.633 に答える
0

z-indexdiv の( w3schools ) を高く設定します。

これを Web サイトのレイヤーとして見ることができます。たとえば、0 は下に来ます 10 は上に来ます。

于 2013-04-22T00:02:59.103 に答える