1

我有一个网页，其中有两个占据整个空间的 div。我想一次显示一个，在它们之间有一个 JQueryUI 幻灯片过渡，以便一个 div 向左滑动，并被另一个从右侧滑入的 div 所取代。不幸的是，现在，由于两个动画同时发生，第二个 div 出现在第一个 div 的下方，然后在动画结束时向上滑动以替换第一个 div。如何定位第二个 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

将div的z-index( w3schools ) 设置得更高。

您可以将其视为网站的层。例如 0 在底部 10 在顶部。

于 2013-04-22T00:02:59.103 回答