當進度條獲得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

回答

相關問題