第一次通话时,Phonegap/jquery移动幻灯片转换无法正常工作

我有一个尴尬的视觉故障.在应用程序上更改页面时,我希望有一个很好的转换.不幸的是,当我第一次切换到另一个页面时,当前页面立即被新页面替换掉,而不是滑动当前页面,然后滑出.当第一页不在视图范围内时,将显示新页面.然而,第二次,它就像一个魅力!

这是在iphone上使用jQuery Mobile + PhoneGap运行的

我制作了一个视频来帮助澄清问题:http://www.youtube.com/watch？v = Ybvzh_wTnSE

    
        

            

                

                

                

                

                

                

                

                

                

            
            

                
                
           
                    

                        

                        

                        

                            
Email: 
                            
Password: 
                            LOGIN
                        
                    
                
                

                
                
    
                        
My dives !
       
                

                
   
                        
My explore !
     
                

                
    
                        
My search !
      
                

                
  
                        
My settings !
                        logout      
                

                
            
        
        

        

    

和相关的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方法仅在菜单项中添加/删除"selected"类.