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

Question

我在我的网站中创建了一个“正在加载的 div”...当您进入网站时，您只会看到一个黑色的 div，中间有一个徽标和一个进度条。

进度条已使用 CSS3 和 JQuery（过渡）完成。页面加载时，body标签得到一个“loaded”类，进度条增加到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() 将返回 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