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