javascript - JQuery:在页面之间滑动

Question

尝试使用 jQuery UI 模拟 iPad 的“在页面之间滑动”功能。

我有这两个全屏 div:

<div id="introLayer" class="layer"></div>
<div id="gameLayer" class="layer" style="display:none;"></div>

在某些时候，introLayer 必须隐藏向左滑动，被 gameLayer 替换，跟随它的滑动运动。

我尝试了以下方法:

    $('#introLayer').hide(
        'slide',
        { direction: "left" },
        1000);

    $('#gameLayer').show(
        'slide',
        { direction: "left" },
        1000);

它导致 introLayer 很好地滑出，但 gameLayer 只是在之后出现并且没有任何效果。

Answer 1

首先通过调用 $('#gameLayer').hide() 隐藏 gameLayer 而不是将其置于内联样式中:style="display:none;"

$('#gameLayer').hide(); 

$('#introLayer').hide(
  'slide',
    { direction: "left" },
    1000);

$('#gameLayer').show(
    'slide',
    { direction: "left" },
    1000);