创建左/右过渡效果

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