Question

我在网站上遇到问题我正在Android上的股票浏览器上正确显示。我知道股票浏览器不如Chrome可靠，但我需要让它在浏览器上工作，因为客户端坚持这一点以及淡入淡出。

按下顶部的菜单时，移动设备会出现此问题。应该发生什么是页面应该淡出然后菜单页面淡入。出现问题，淡入淡出不工作，页面显示为黑页，即使链接仍然可用。

我做了一些测试，发现通过改变jQuery：

jQuery(document).ready(function(){

到

$(window).load(function(){

解决了这个问题，但是这看起来并不是很好，因为所有的页面元素都完成了加载和显示，然后发生了淡入淡出。所以这不是一个解决方案，但建议股票浏览器在页面加载完成之前启动淡入淡出。

我还尝试将.js文件从header.php中的头部移动到菜单html之后的底部。这再次导致菜单html加载并出现，然后Javascript在菜单中运行并淡入淡出。再次不是最佳的，因为它看起来不太好。

这是影响它的Javascript：

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;
    }
}

感谢任何帮助！

Answer 1

启动页面opacity 0然后使用jQuery在文档就绪时更改它。我使用CSS3过渡因为它更简单，但它也可以用jQuery和display: none属性完成。

// 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

移动设备上的jQuery页面淡化问题

1 个答案: