jQueryUI : Sliding two divs at the same time

Question

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

代码:

<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

考虑这个 fiddle :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 在视口(viewport)中占据相同的位置。这是通过将它们绝对定位到相同的坐标来完成的。请注意，这些坐标是相对于外部 div 的。引用这个问题的答案https://stackoverflow.com/a/10426717/30007

Both “relative” and “absolute” positioning are really relative, just with different framework. “Absolute” positioning is relative to the position of another, enclosing element. “Relative” positioning is relative to the position that the element itself would have without positioning.

It depends on your needs and goals which one you use. “Relative” position is suitable when you wish to displace an element from the position it would otherwise have in the flow of elements, e.g. to make some characters appear in a superscript position. “Absolute” positioning is suitable for placing an element in some system of coordinates set by another element, e.g. to “overprint” an image with some text.

As a special, use “relative” positioning with no displacement (just setting position: relative) to make an element a frame of reference, so that you can use “absolute” positioning for elements that are inside it (in markup).