創建左/右過渡效果

Question

我試圖創建幻燈片過渡效果，如發佈在視頻http://www.youtube.com/watch?v=SZTiJmclaRc中的幻燈片過渡效果。

當按鈕被點擊時，當前div＃1將向左滑動並隱藏自己，而另一個div＃2將從右側滑動並移動到前一個滑出div的位置。

當按鈕被再次觸發時，div＃2將向右滑動，而先前隱藏的div＃1將從左側滑出。

我一直在嘗試修改http://jsfiddle.net/qSvDz/的代碼如下，但我似乎無法得到我想要的結果。

任何人都可以請分享我一些想法如何做到這一點。

function toggleDivs() { 
var $home = $("#home"); 
var $memberHome = $("#member-home"); 
var $slideOut, $slideIn; 

// See which <divs> should be animated in/out. 
if ($home.position().left < 0) { 
    $slideIn = $home; 
    $slideOut = $memberHome; 
} 
else { 
    $slideIn = $memberHome; 
    $slideOut = $home; 
} 

$slideOut.animate({ 
    left: "-" + $slideOut.width() + "px" 
}, function() { 
    $slideIn.animate({ left: "0px" }); 
}); 
} 

$("button").bind("click", function() { 
    toggleDivs(); 
}); 

感謝 消防

Answer 1

像這樣的事情？

http://jsfiddle.net/k_rma/VmSX4/

HTML：

<div id="container"> 
    <div id="inner"> 
     <div id="home"> 
      <button>Click</button> 
     </div> 
     <div id="member-home"> 
      <button>Click</button> 
     </div> 
    </div> 
</div> 

JS/JQUERY：

function toggleDivs() { 
    var $inner = $("#inner"); 

    // See which <divs> should be animated in/out. 
    if ($inner.position().left == 0) { 
     $inner.animate({ 
      left: "-400px" 
     }); 
    } 
    else { 
     $inner.animate({ 
      left: "0px" 
     }); 
    } 
} 

$("button").bind("click", function() { 
    toggleDivs(); 
}); 

CSS：

#container { 
    position:relative; 
    border: 1px solid black; 
    width:400px; 
    height:600px; 
    overflow:hidden 
} 
#inner { 
    position: relative; 
    width: 800px; 
} 
#home { 
    position:absolute; 
    width: 400px; 
    height: 600px; 
    background-color: red; 
} 

#member-home { 
    position:absolute; 
    left:400px; 
    width: 400px; 
    height: 600px; 
    background-color: green; 
}