javascript - 在页面加载时使用 Jquery 加载栏

Question

w=大家好，我想要实现的是进度条的动画，即 .progress div 从 document.ready 上的 0% 宽度到 document.load 上的 100% 宽度，但是我希望它能够顺利地动画化 -我觉得这可以通过 CSS 完成，但它不是跨浏览器，目前我的 .progress div 的宽度几乎直接达到 100% 宽度。它包含的 div #overlay 也会在 document.ready 上淡出...有什么想法吗？这是我目前拥有的；

CSS

.progress {
        width: 100%;
        height: 4px;
        background: none;
        position: absolute;
        top: 0;
        text-align: left;
}

.progress div {
       background: #000;
}

JQuery

var progress = $('.progress div');

$(window).ready(function(){
    progress.css('width','0'+'%');

}); 

$(window).load(function(){
    //Set width to 100%
    progress.css('width','100'+'%');

   // PAGE IS FULLY LOADED  
   // FADE OUT YOUR OVERLAYING DIV
   $('#overlay').fadeOut();

});

HTML

    <div id="overlay">
        <div class="progress">
            <div class="bar"></div>
        </div>
        <div id="logo">
        <img src="images/logo.png">
        </div>
    </div>

在此先感谢您的帮助；)

编辑

我尝试过使用 css 转换，但是发生了同样的情况，它们直接达到 100%，而不是像转换语句中所述的那样超过 4s——如下所示

 -webkit-transition: width 500ms ease-out 1s;
        -moz-transition: width 500ms ease-out 1s;
        -o-transition: width 500ms ease-out 1s;
        transition: width 500ms ease-out 1s;
}

Answer 1

使用动画

jsfiddle Example

 $(document).ready(function(){
var progress = $('.progress .bar');
//Set width to 100%
progress.animate({
  width:'100%'
}, 2000);
setTimeout(function() {
 $('#overlay').fadeOut();
}, 4000);

});