JQuery:在页面之间滑动

Question

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

我有这两个全屏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);

Answer 2

$('#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);