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();    
 $('#introLayer').hide(
            'slide',
            { direction: "left" },
            1000 ,  function(){  $('#gameLayer').show(
            'slide',
            { direction: "left" },
            1000);});

像这样尝试或在下面尝试

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

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

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

Answer 2

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

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

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

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