Question

我想在加载网页时显示一个div 5秒，然后让它消失。这是我的代码：

<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>
setTimeout(function() {
    $('#mask').hide();
}, 5000);
</script>
</head>
<body>

<div id="mask">
<h2>This div will fade out </h2>
</div>

</body>
</html>

上面的代码不起作用，但是如果我删除调用jQuery mobile javascript的单行

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

它完美无缺。关于我如何在<head>部分同时使用jQuery和jQuery mobile的任何想法？

Answer 1

当jQuery初始化时，许多事件监听器将代码包装在事件监听器上，如：

    jQuery(document).ready(function ($) {
    setTimeout(function () {
        $('#hide').hide();
    }, 5000);
});

http://jsfiddle.net/wcuxS/1457/

Answer 2

尝试在第一页中加入div：

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content">
        <div id="mask">           
            <h2>This div will fade out </h2>
        </div>
    </div>
</div>

然后在pagecreate事件中添加脚本：

$(document).on("pagecreate", "#page1", function () {
    setTimeout(function () {
        $('#mask').hide(800);
    }, 5000);
});

正在使用 DEMO

Answer 3

您需要使用Jquery Mobile api。在$（document）.on（'pageinit'）事件回调中嵌入超时功能。此外，我不确定它是否称为“pageinit”，但是有一个Jquery Mobile事件，其行为类似于$（document）.on（'ready'）。对JQM api进行一些研究

如何使用jQuery mobile在几秒钟后隐藏div？

3 个答案: