Question

我已经创建了一个＆＃34;加载div＆＃34;在我的网站上...当你进入网站时，你只看到一个带有徽标的黑色div和中间的进度条。

使用CSS3和JQuery（转换）完成了进度条。当页面加载时，body标签会被加载＆＃34; class，进度条增加到100％...

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

我创建了这个代码，用于制作黑色div消失，但它不起作用......你能帮助我吗？

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

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

NEW PART

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

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

但是当我加载页面时，警报显示0％宽度。因此，当宽度动画结束并且div获得100％宽度时，我必须以某种方式使用该函数。但是，怎么......？ timeupdate功能？声明？也许是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

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

1 个答案: