当进度条达到 100% 宽度时淡出 DIV

Question

我在我的网站上创建了一个"loading div"...当你进入该网站时，你只会看到一个黑色的div，中间有一个标志和一个进度条。

进度条已用 CSS3 和 JQuery（转换）完成。当页面加载时，body 标签得到一个 "loaded" class，进度条增加到 100%...

当进度条达到100%宽度时，黑色div消失...

我已经创建了这个代码来使黑色 div 消失，但是它不起作用...你能帮我吗？

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

if($('body').hasClass('loaded')) {
    if($('#progress_bar').width() == '100%'){ $('#black_div').fadeOut('fast'); }
}

新部分

我已经实现了你告诉我的功能并且我已经创建了一个警报：

alert($('#progress_bar').loadingWidth());

但是当我加载页面时，警告显示宽度为 0%。因此，当宽度动画结束并且 div 获得其 100% 宽度时，我必须以某种方式使用该函数。可是，怎么……时间更新功能？ while 声明？也许 ajax...?

Answer 1

使用 .width() 将 return px，因此您需要以某种方式计算其宽度。一种方法是根据其父元素检查它。

像这样的东西可以解决问题：

$.fn.Percentage = function(){
    var parent = this.parent();
    return ~~((this.width()/parent.width())*100)+"%";
}

然后调用它：

if ($("#progress_bar").Percentage() == "100%" ){
 $('#black_div').fadeOut('fast'); 
}

这是一个Example Fiddle

当进度条达到 100% 宽度时淡出 DIV

Fade out a DIV when a progress bar gets 100% width

css

jquery

progress-bar