jquery - J 查询 - 在页面之间淡入淡出并使用文本预加载页面

标签 jquery html css

您好,我刚开始使用 JQUERY,遇到了一个问题。我想要一个简单的预加载页面,其中包含等待网站加载的文本。我还想让 JQUERY 在页面之间淡入淡出。

我只希望文本在页面第一次加载时出现,而不是在页面上的导航链接之间出现。我的代码在加载页面时有效,但它还会显示导航链接之间的文本。

感谢您的帮助,希望它有意义

JQuery

$(window).load(function() {
$(".loader").delay(2000).fadeOut("slow");       
    $("body").css("display", "none");
    $("body").fadeIn(2000);
});
    $('#link').click(function(){
        $("body").css("display", "none");
        $("body").fadeIn(2000);

});

CSS

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: black;
}

#load_text{
    text-align: center;
    color: white;
    left: 0;
    line-height: 200px;
    margin: auto;
    margin-top: -100px;
    position: absolute;
    top: 50%;
    width: 100%;
 }

HTML

<body>   
<div class="loader">
    <h1 id = "load_text">THIS IS A BIG HEADING</h1>
</div>

<div class = "jumbotron">
    <div id = "container">
                <a href = "index.html" id = "link" > <h1>LINK</h1></a>
                <a href = "second page.html" id = "link"> <h1>LINK2</h1></a>     
    </div>

</div>
</body>    

感谢您的帮助,我尝试了您的建议,但无法实现。 这是代码。

    $(document).ready(function() {
                // check cookie
    var visited = $.cookie("visited")

    if (visited == null) {   

        $(".loader").css("display", "inline");
        $(".loader").fadeOut(2000);
        $.cookie('visited', 'yes'); 
        alert($.cookie("visited"));         
    }

$(window).unload(function () {
    // Remove the cookie
    $.cookie("visited", null);
});      


});

最佳答案

存储一个变量(例如,作为 cookie),它将指示页面是否首次加载。 在淡入淡出功能之前执行检查,如果页面是第一次加载,则淡入淡出,否则 - 什么都不做。

关于jquery - J 查询 - 在页面之间淡入淡出并使用文本预加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24410895/

相关文章:

javascript - JQuery ui 如何使可选中的某些元素不可选

javascript - 提交时隐藏输入 (VUE)

jquery - 如何根据 fancybox 内容高度(大覆盖或滚动页面)固定覆盖背景高度。

javascript - 如何创建一个 jQuery 选择,它是另一个 jQuery 选择的随机样本?

javascript - 我可以使用 jQuery 为我制作一个下拉菜单。我怎样才能使用 jQuery 让它回到原来的位置?

html - 谷歌浏览器上传按钮呈现奇怪

html - 设置 BODY 的最小宽度和高度

CSS 事件属性无法正常工作

jquery - 在 jquery 中修复一个方向的菜单

html - 导航下的箭头