Question

我试图模仿我在众多iPhone应用程序中看到的效果。当点击按钮时，它基本上从右向左滑动屏幕上的内容。原始屏幕中的内容向左滑出视图，下一个屏幕的内容从右侧滑动到中心。

我已经能够用jQuery实际模拟这个。见this fiddle。它工作正常，但随着动画变得更加复杂（即添加按钮以恢复到原始屏幕或当有两个以上的屏幕），这种方法变得非常复杂和令人困惑。我确信有更有效的方法来实现这种效果，但我不知道。有人能给我一个暗示吗？我在网上搜索过，但我认为我在搜索中没有使用正确的条款，因为我没有找到任何内容。我的代码如下所示。

HTML：

<div id="screen1">
    <div id="header">Screen 1</div>
</div>

<div id="screen2">
    <div id="header">Screen 2</div>
</div>

<a href="#" id="button">Swipe</a>

CSS：

body, html {
    width: 100%;
    height: 100%;
}

#screen1 {
    background: blue;
    width: 100%;
    height: 100%;
    position: fixed;
}

#header {
    height: 50px;
    width: 100%;
    background: red;
}

#screen2 {
    background: green;
    width: 0px;
    height: 100%;
    position: fixed;
    right: 0;
}

jQuery：

$('#button').click(function(){
    $('#screen1').animate({width: '0px'});
    $('#screen2').animate({width: '100%'});
});

JS Fiddle Example

Answer 1

我不知道你目前在做什么有什么问题。您可以进行的一项改进只是在切换屏幕时为一个元素设置动画。例如，请#screen1 z-index: 1和#screen2 z-index: 2。然后，您可以移除动画#screen1的线条，因为另一个屏幕将显示在其上方。 jsFiddle example

如果您有多个屏幕，则可以使用z-index: 0启动所有屏幕。当您希望屏幕显示在顶部时，先将其设为z-index: 1，然后然后执行动画以将其置于其他屏幕之上。当再次使用另一个屏幕执行此操作时，您可以执行相同的操作并在动画之前切换z-indexes 。您还需要适当地设置宽度。最后，你的JS可能看起来像这样：

$targetScreen = getTargetScreen(); // somehow figure out which screen you're switching to $prevTargetScreen = getPrevTargetScreen(); // this will also depend on your implementation $prevTargetScreen.css('z-index', 0); $targetScreen .css({ width: 0, `z-index`: 1 }) .animate({width: '100%'});

Answer 2

使用多个屏幕的简单方法是将所有屏幕保存在一个阵列中并记住您当前的屏幕。

看看这个小提琴：http://jsfiddle.net/9C9yf/4/

我的第一个建议是不设置宽度的动画（它会弄乱定位），但会在屏幕上设置左侧位置的动画（我将它们设置为absolute）。

然后在加载时，每个屏幕必须位于top : 0; left : 100%。

然后在DOM ready上调用此代码：

var arrScreen = new Array();

$('.screen').each(function(){
   arrScreen.push($(this));
})

var currentScreen = 0;

arrScreen[currentScreen].css('left', '0%');

这将保存页数并显示第一页。

之后，您需要更改滑动操作。此代码目前适用于1方，但我相信你会找到一种方法来激活另一方：

$('.button').click(function(){
    if(currentScreen < arrScreen.length){
        currentScreen++;
        arrScreen[currentScreen].animate({'left' : '0%'});
    }
});

基本上，它检查我们是否在最后一页上，然后为下一个元素的左侧位置设置动画。

抬头如果您想要转到上一页，动画left属性将是100％。

类似于ios的动画可以从右到左滑动内容

JS Fiddle Example

2 个答案: