Question

Trying to mock the “swipe between page” feature of iPads using jQuery UI.

I have these two full-screen divs:

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

At some point, the introLayer must hide sliding to the left, being replaced by the gameLayer, following its slide motion.

I tried the following:

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

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

It results in the introLayer sliding out nicely, but the gameLayer only appears afterwards and without any effect.

Answer 1

Hide the gameLayer first by calling $(‘#gameLayer’).hide() instead of putting it in inline style: style="display:none;"

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

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

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