JQueryUI: slipping two divs at the same time

I have a web page where I have two divs that take up the full space. I want to show them one at a time with a JQueryUI slide transition between them so that one div slides away to the left and is replaced by the other div sliding in from the right. Unfortunately, right now, since both the animations occur at the same time, the second div appears below the first div and then slides up to replace the first div at the end of the animation. How do I position the second div so that the sliding motion happens seamlessly?

Code:

    $('#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");
        });

Consider this fiddle: http://jsfiddle.net/FkNa2/2/

The relevant code is the css positioning,

// html

some content here

// 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; }

The trick is to ensure that both the divs will occupy the same position in the viewport. That is done by absolutely
positioning both of them to the same coordinates. Note that these coordinates are relative to the outer div. Refer the answers to this question 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).
Hello, buddy!稿源:Hello, buddy! (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » JQueryUI: slipping two divs at the same time

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录