Jquery从左到右滑动使div在幻灯片上向上跳跃

我正在尝试创建一种效果，当单击链接时，它会使初始 div 向左滑动并显示向左滑动的第二个 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/ http://jsfiddle.net/rayshinn/abNmN/4/

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

感谢您的帮助。

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

小提琴的例子 http://jsfiddle.net/abNmN/6/（更新）

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);