Question

我创建了一个div，其中包含我的网站名称。当您进入网站时，您会看到名称已填充（如进度条）。它假设当名称 COMPLETELY 填充时，div 消失;但是当它没有被完全填满时它会消失。或多或少 50％ ......

能帮助我吗？

**您可以在下一个链接中查看：** tapeHD

以下是代码......

JQUERY代码

$(document).ready(function () {
    /* Loading */
    $(window).load(function () { $('body').addClass('loading'); });

    setTimeout(function() {
        if($('body').hasClass('loading')) {
            $('#loading').fadeOut();
            $('body').removeClass('loading');
            $('body').addClass('loaded');
        }
    }, 2000);

    if($.cookie('showOnlyOnce')){
        $('#loading').hide();
    } else {
        $.cookie('showOnlyOnce', 'showOnlyOnce', { expires: 1 });
        $('#loading').show();
    }
    /* END Loading */
});

CSS3代码

body.loading #loading .title2 span,
body.loading #loading h1 .progress_bar_container .progress_bar {
    width: 100%;
}

body.loaded #loading .title2 span,
body.loaded #loading h1 .progress_bar_container .progress_bar {
    width: 100%;
}

#loading {
    background-color: #252328;
    bottom: 0;
    height: 100%;
    left: 0;
    margin: auto;
    max-width: 100%;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
}

#loading .container {
    bottom: 0;
    height: 100%;
    height: 100%;
    left: 0;
    margin: 0 auto;
    max-width: 100%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 29rem;
}

#loading h1 {
    bottom: 0;
    font-family: CaviarDreams_Bold;
    font-size: 8.2rem;
    height: 1.4em;
    left: 0;
    margin: auto 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}

#loading h1 span {
    display: block;
    left: 0;
    line-height: normal;
    position: absolute;
    top: 0;
}

#loading h1 .progress_bar_container {
    background-color: rgba(0, 0, 0, 0.8);    
    bottom: 0;
    box-shadow: 2px 2px 3px rgba(255,255,255,0.1);
    height: 7%;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 36%;
}

#loading h1 .progress_bar_container .progress_bar {
    background-color: #FFF;
    display: inline-block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 0%;

    -webkit-transition: width 2s linear;
       -moz-transition: width 2s linear;
        -ms-transition: width 2s linear;
         -o-transition: width 2s linear;
            transition: width 2s linear;
}

#loading .title1 {
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

#loading .title2 { color: #FFF; }

#loading .title2 span {
    overflow: hidden;
    width: 0%;

    -webkit-transition: width 2s linear;
       -moz-transition: width 2s linear;
        -ms-transition: width 2s linear;
         -o-transition: width 2s linear;
            transition: width 2s linear;
}

div设置了一个cookie。它每天只显示一次。每当您进入网站时，请清除Cookie以显示它...

我用animate函数

尝试了这个

var progress = false;

$(window).load(function () { $('body').addClass('loading'); });

if($('body').hasClass('loading')) { progress = true; }

if(progress == true) {
    $("body.loading #loading .tapeHDProgress").animate({ width: "100%" }, 2000, function() {
        $('#loading').fadeOut();
        $('body').removeClass('loading');
        $('body').addClass('loaded');
    });
}

但它不起作用

进度完成后加载网站

0 个答案: