当进度条获得100％宽度时淡出DIV

我在我的网站中创建了一个“loading div”...当您进入网站时，您只会看到带有徽标和进度条的黑色div在中间。当进度条获得100％宽度时淡出DIV

进度条已用CSS3和JQuery（转换）完成。页面加载时，body标签得到一个“装”类和进度条增加至100％......

当进度条得到100％的宽度，黑色格自败...

我已经创建了用于制作黑色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％宽度时，我必须使用该函数。但是，怎么......？ timeupdate函数？而声明？也许阿贾克斯...？

来源

2015-04-01 Antonio

使用.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

来源

2015-04-01 21:25:15 Und3rTow

它不工作...我有一个0％宽度的进度条。当页面加载时，body标签得到一个类：“loaded”。所以，如果我有过渡条：宽度2s线性; body.loaded宽度为100％的#progress_bar，宽度逐渐增加。当它达到100％，然后，div消失......但正如我所说，它并没有工作 – Antonio 2015-04-01 22:12:50

你可以使用'setTimeout（）'推迟'fadeOut（）'直到进度条达到100％ – Und3rTow 2015-04-02 05:27:37

它完美的工作，谢谢兄弟 – Antonio 2015-04-02 13:27:18

当进度条获得100％宽度时淡出DIV

回答

相关问题