Question

我有一个网页，我有两个占用整个空间的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>

Answer 1

考虑这个小提琴：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

的答案

“相对”和“绝对”定位都是相对的，只是   与不同的框架。 “绝对”定位是相对于   另一个封闭元素的位置。 “相对”定位是   相对于元素本身没有的位置   定位。

这取决于您使用的需求和目标。 “相对”   当你想要从中取代元素时，位置是合适的   否则它将在元素流中具有的位置，例如制作   一些字符出现在上标位置。 “绝对”   定位适合于将元素放置在某些系统中   由另一个元素设置的坐标，例如使用“叠印”图像   一些文字。

作为一个特殊的，使用“相对”定位没有位移（只是   设置位置：relative）使元素成为参照系，   这样你就可以对元素使用“绝对”定位   在里面（在标记中）。

Answer 2

将div的z-index（w3schools）设置得更高。

您可以将其视为网站的图层。例如0位于底部，10位于顶部。

JQueryUI：同时滑动两个div

2 个答案: