Question

我想要完成的是让非活动页面默认显示=“none;”但在页面处于活动状态时可以看到（可能使用.show（））。

我正在努力实现这一目标，因为（经过许多小时后）尝试不同的建议无法消除幻灯片转换到新页面时发生的白色闪光。一个建议是隐藏所有非活动页面，直到它们处于活动状态。

<div data-role="page" style="display:none;" id="page2">

Answer 1

我不知道它是否能解决你的白色闪光问题，但这里是如何隐藏和显示页面div：DEMO FIDDLE

我使用visibility:hidden;创建了一个类，并将其应用于标记中的不可见页面：

.hidePage {
    visibility:hidden;
}

<div data-role="page" id="page2" class="hidePage">...
<div data-role="page" id="page3" class="hidePage">...

然后我处理所有页面的pageshow事件，删除或添加类，具体取决于现在显示的那个：

$(document).on("pageshow", function(e){    
    var curPageID = $(e.target).prop("id");
    $('[data-role="page"]').each(function( index ) {
        if ($(this).prop("id") == curPageID){
            $(this).removeClass("hidePage");
        } else {
            if (!$(this).hasClass("hidePage")){  
                $(this).addClass("hidePage");    
            }
        }    
    });
});

如果你仍然得到闪光灯，我们可以尝试使用setTimeout并将可见度延迟几毫秒......

Answer 2

我终于找到了解决方案！

我在这里找到了fastclick.js：https://github.com/ftlabs/fastclick。

我只是添加了

<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>

到我的文件头。

在页面之间导航时不再闪烁/闪烁。

我希望这能帮助我见过的许多其他人带来闪烁效果。

jQuery .show（）if class =“visible”for JQM app

2 个答案: