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 j的幻灯片动画进入到位。有没有一种方法可以在没有div弹出/跳跃效果的情况下从左至右创建流畅的动画？

谢谢你的帮助。

Answer 1

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

Fiddle exemple（更新）

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