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＆lt; 0）。如果是这样，它会通过设置CSS将其拉回到屏幕上：left: 0px并使用CSS left: "-" + $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();
});

jQuery iPhone效果向左滑动并向右滑动

2 个答案: