Question

i have the problem of a white screen appearing between the transition between 2 separate html pages name index.html and mainpage.html. can anyone please get this to dissapear.i have put in jquery functions to fade in and out! code following :

PS : i am using the windows phone 7 emulator!

HTML:

    <a  id="loginbtn" data-role="button" href="MainPage.html" 
style="margin-left: 60px;" class="ui-btn-up-a"> Log in</a> 

JQuery :

 $(document).ready(function () {
        $("body").css("display", "none");
        $("body").fadeIn(3000);

        $("a#loginbtn").click(function (event) {
            event.preventDefault();
            linkLocation = this.href;
            $("body").fadeOut(200, redirectPage);
        });

        function redirectPage() {
            window.location = linkLocation;
        }
    });

i have been at the following links, but i am very new to using Cordova/PhoneGap so i dont get this, maybe someone explain it to me will be a great help!

links :

Github Forums

Github Forums – “Answer”

the fadeout works, and the fade in!
but after the fade out the white screen appears and load the new page.

Using : HTML5/CSS/Javascript/Jquerymobile/Jquery.1.7/JqueryMobile.1.2.0

Thanks in advance

Answer 1

Part of the problem is using document.location and efectively restarting the app as Romain pointed out. However, after fixing that, you will still get a blank page but for a different reason.

By default, jquery mobile transitions after 1.1 are sequential (aka horribly broken) – page one fades out, leaving the default white background, then page two fades in. You need to replace the transition handler to get a nice crossfade.

https://github.com/watusi/jquery.mobile.simultaneous-transitions