手机上的jQuery页面淡入问题

Question

I'm having a problem with a website I'm working on displaying correctly on the stock browser on Android. I know that the stock browser isn't as reliable as Chrome, however I need to get it working on the browser as the client insists on this as well as the fade in.

The issue occurs on mobile when pressing the Menu at the top. What should happen is the page should fade out and then the menu page fades in. The problem occurs with the fade in not working and the page appearing as a black page even though the links are still use-able.

I've done some testing and have found that by changing the jQuery from:

jQuery(document).ready(function(){

to

$(window).load(function(){

solves the issue, however this doesn't look very nice at all as all the page elements finish loading and display and then the fade in happens. So this isn't a solution, but suggests that the stock browser is launching the fadein before the page has finished loading.

I've also tried moving the .js file from the head in the header.php to the bottom after the Menu html. This again results in the menu html loading and appearing and then the Javascript runs and fades in the menu. Again not optimal as it doesn't look very good.

Here's the Javascript affecting it:

function transitionPage(){
    $('body').css('opacity', '0').fadeTo(1500, 1,'swing'); 

    $('.menu_open').css('opacity', '0').fadeTo(1500, 1,'swing'); 

    $('a.transition').click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $('body').css({zIndex:99}).fadeOut(3000, redirectPage);

        $('.menu_open').css({zIndex:99}).fadeOut(4000);
    });

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

Any help would be gratefully appreciated!

Answer 1

Start the page already opacity 0 then use jQuery to change it on document ready. I used CSS3 transitions as it is simpler but it could also be done with jQuery and the display: none property.

// CSS
body {
  opacity: 0;
  transition: opacity 1.5s;
}

// JS
$(function() {
  $('body').css({opacity: 100});
});

http://jsbin.com/qecaha/1/edit

// CSS
body {
  display: hidden;
}

// JS
$(function() {
  $('body').fadeIn(1500);
});

http://jsbin.com/qecaha/2/edit