Переход между мобильными слайдами в телефонном промежутке / jquery не работает должным образом при первом звонке

У меня неприятный визуальный сбой . Мне нужен приятный переход при смене страниц в приложении. К сожалению, когда я впервые перехожу на другую страницу, вместо того, чтобы выдвигать текущую страницу и вставлять новую, текущая страница немедленно заменяется новой страницу, а затем выскользнет. Когда первая страница не отображается, отображается новая страница. Однако во второй раз это работает как шарм!

Это работает на iphone с jQuery Mobile + PhoneGap

Я сделал видео, чтобы помочь прояснить проблему: http://www.youtube.com/watch?v=Ybvzh_wTnSE

    
        
        

И соответствующие CSS:

    body {margin: 0; font: 18px Helvetica; text-align: center; background-color: #000; background: url(../img/bg_big.png) repeat;
        -webkit-user-select: none;  /* prevent copy paste for all elements */
        }
    #container { width:320px; height:460px; overflow: hidden;}

    input{ -webkit-user-select: text;  /* enable copy paste for elements with this class */}
    a {-webkit-user-select: none;  /* prevent copy paste for all elements */}
    span {-webkit-user-select: none;  /* prevent copy paste for all elements */}

    #side-menu {z-index: 1000 !important; position: fixed; height: 460px; width: 56.5px; background: url(../img/bg_big.png) no-repeat; display: inline-block;
    overflow: hidden; top: 0px; left: 0px; }
    #header_top {background: url(../img/header/header_top.png) no-repeat; background-size: 56.5px 48.96px; width: 56.5px; height: 48.96px; display: block;}
    #header_dives {background: url(../img/header/dives.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
    #header_dives.selected{background: url(../img/header/dives_selected.png) no-repeat;}
    #header_spacer1{background: url(../img/header/header_space1.png) no-repeat; background-size: 56.5px 13.9px; width: 56.5px; height: 13.9px; display: block;}
    #header_explore{background: url(../img/header/explore.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
    #header_explore.selected{background: url(../img/header/explore_selected.png) no-repeat;}
    #header_spacer2{background: url(../img/header/header_space2.png) no-repeat; background-size: 56.5px 15.33px; width: 56.5px; height: 15.33px; display: block;}
    #header_search{background: url(../img/header/search.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
    #header_search.selected{background: url(../img/header/search_selected.png) no-repeat;}
    #header_spacer3{background: url(../img/header/header_space3.png) no-repeat; background-size: 56.5px 17.73px; width: 56.5px; height: 17.73px; display: block;}
    #header_settings{background: url(../img/header/settings.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
    #header_settings.selected{background: url(../img/header/settings_selected.png) no-repeat;}
    #header_bottom{background: url(../img/header/header_bottom.png) no-repeat; background-size: 56.5px 160px; width: 56.5px; height: 160px; display: block;}

    .hidden {display: none;}
    .right_pane{width: 263.5px !important; background: url(../img/right_bg.png) no-repeat; background-size:263.5px 460px; width: 263.5px; height: 460px; left: 56.5px !important;}
    #slide_mask{ display: inline-block; overflow: hidden; padding-left: 56.5px;  width: 263.5px; height: 460px; top: 0;}

и бит JS:

    ///////////////////////////////////
    //MENU MECHANICS
    ///////////////////////////////////

    function showdives(){
        $("#side-menu .selected").removeClass("selected");
        $("#header_dives").addClass("selected");
    }

    function showexplore(){
        $("#side-menu .selected").removeClass("selected");
        $("#header_explore").addClass("selected");
    }
    function showsearch(){
        $("#side-menu .selected").removeClass("selected");
        $("#header_search").addClass("selected");
    }
    function showsettings(){
        $("#side-menu .selected").removeClass("selected");
        $("#header_settings").addClass("selected");
    }

Методы onclick только добавляют / удаляют "выбранный" класс в / из пунктов меню.

10
задан Chase Sandmann 3 August 2012 в 16:43
поделиться