javascript - Jquery从左到右滑动使div在幻灯片上跳起来

Question

我正在尝试创建一种效果，当单击链接时，它会使初始 div 向左滑动并显示第二个 div 向左滑动，当从第二个 div 单击链接时，第一个 div 向右滑动div 也向右滑动。

到目前为止，这是我的代码

HTML

<div id="box1">
    <a href="#" id="click1">Click to show other div</a>
     <br>
    Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh    ultricies sem amet.Class aptent taciti sociosqu ad posuere.
</div>

<div id="box2" style="display:none">
    <a href="#" id="click2">Click to show other div</a>
     <br>
    Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh    ultricies sem amet.Class aptent taciti sociosqu ad posuere.
</div>

JS

$(document).ready(function () {
    $('#click1').click(function () {
        $('#box1').hide("slide", {
            direction: "left"
        }, 1000);
        $('#box2').show("slide", {
            direction: "right"
        }, 1000);
    });
    $('#click2').click(function () {
        $('#box2').hide("slide", {
            direction: "right"
        }, 1000);
        $('#box1').show("slide", {
            direction: "left"
        }, 1000);
    });
});

这是迄今为止我所拥有的 JSFiddle 链接http://jsfiddle.net/rayshinn/abNmN/4/

问题是当我单击链接并调用幻灯片动画时，第二个隐藏的 div 会跳到位。有没有一种方法可以在没有 div 弹出/跳跃效果的情况下从左到右创建平滑的动画？

感谢您的帮助。

Answer 1

在相对定位的包装器中使用绝对定位。

小提琴示例（更新）

HTML

<div id="wrapper">
    <div class="slidingDiv" id="box1">...</div>
    <div class="slidingDiv" id="box2" style="display:none">...</div>
</div>

CSS

#wrapper {
    position:relative;
}

#wrapper div {
    position:absolute;
    top:0;
}

Javascript自动高度计算

var maxHeight = 0;
$('.slidingDiv').each(function() {
    if($(this).height() > maxHeight) maxHeight = $(this).height();
});
$('#wrapper').height(maxHeight);