jQuery iPhone效果幻灯片左和幻灯片右

Question

我想创建这样工作的iPhone滑动效果：

单击按钮时，当前div#1将向左滑动并隐藏，而另一个div#2将从右侧滑动并移动到上一个滑动div的位置。

当按钮再次触发时，div#2将向右滑动，而之前隐藏的div#1将从左滑动。

我曾尝试使用stackoverflow中一位用户建议的代码，但我就是没能成功。

http://jsfiddle.net/qSvDz/

有人能引导我通过吗？

谢谢火灾

Answer 1

使用这个：http://jquery.malsup.com/cycle/具有"scrollLeft"或"scrollRight"效果的

Answer 2

http://jsfiddle.net/qSvDz/231/

当#home在屏幕上时，CSS只是将#member home从屏幕上推掉。相当基础。

该按钮每次单击时都会调用toggleDivs（）。toggleDivs（）获取两个独立的div并将它们分配给局部变量。首先，它检查div#home是否在屏幕外（position（）.left<0）。如果是这样，它将通过设置CSS:left: 0px将其拉回到屏幕上，并使用CSSleft: "-" + $home.width() + "px"将div#memberHome推到屏幕外。如果没有，那么它将把div#memberHome拉到屏幕left: 0px上，并把div#home从屏幕left: "-" + $home.width() + "px" 上推下来

function toggleDivs() {
    var $home = $("#home");
    var $memberHome = $("#member-home");
    if ($home.position().left < 0) {
        $home.animate({
            left: "0px"
        });
        $memberHome.animate({
            left: "-1000px"
        });

    }
    else {
        $home.animate({
            left: "-" + $home.width() + "px"
        });
        $memberHome.animate({
            left: "0px"
        });
    }
}
$("button").bind("click", function() {
    toggleDivs();
});