CSS增量顯示

我在一個白色的html頁面上有一個區域，我想將它分成更小的矩形單元，每個單元帶有黑色背景，並在頁面加載時一次呈現一個黑色單元，水平排列，直到區域爲止完全黑色。這只是美學，單位內部沒有功能或其他內容。CSS增量顯示

如果需要，它可以使用Javascript，JQuery，CSS和或PHP。我能想到的最簡單的想法是一個CSS表，其中所有單元格都具有黑色背景和CSS屬性visibility: hidden，然後使用setTimeOut將每個單元格一次更改爲visibility: visible？

我能想到的另一種方法是在另一個div集合中嵌套一個黑色背景CSS div，我的黑色單元設置爲最終區域大小，並用setTimeOut克隆嵌套div直到父div完全滿。我不確定哪種解決方案更輕。

在哪裏我特別卡住是如何引用的每個單元格（或DIV）一次一個，我是否必須給每個黑色表單元格或單元格的手動id引用，這是較不靈活，或者是否它可以動態完成。

來源

2011-04-28 edwinbradford

你可以做<table>（我做了一個網格，但單排電網好看太）：

<table> 
    <tr><td>The</td></tr> 
    <tr><td>Monkeys</td></tr> 
    <tr><td>Are</td></tr> 
    <tr><td>Loading</td></tr> 
    <tr><td>The</td></tr> 
    <tr><td>HTML</td></tr> 
</table>

並反覆通過JS：

animateNext($('table tr td')); 

function animateNext(items) { 
    items.eq(0).animate({opacity: 1}, 300, function() { 
     animateNext(items.slice(1)); 
    }); 
}

它支持細胞的任意數量的。下面是一個演示：http://jsfiddle.net/vmSNs/49/

我添加了一些CSS樣式，使其覆蓋，並使項目佔據相同的高度填滿屏幕。演示顯示了這一切。

來源

2011-04-28 15:45:32 Blender

+1現在我對使用固定櫃檯感到羞恥！你也可以很容易地在DIV上做這項工作 – JohnP 2011-04-28 15:48:49

對，我應該。我首先做了一個網格（5x5），但是當我看到你的演示時，我記得OP正在尋找單排的東西。爲平滑動畫+1（我的順序，但你可以重疊，這是很好）。 – Blender 2011-04-28 15:51:54

這裏是你的演示調整使用更多的語義'ul' /'li'：http://jsfiddle.net/vmSNs/27/ – thirtydot 2011-04-28 15:52:54

如何在容器div中嵌套黑色div。它是否向下滑動，因此它具有水平顏色下降的外觀？

看到這個：http://jsfiddle.net/fermin/sfTzP/3

來源

2011-04-28 15:38:09 Fermin

可能錯誤的鏈接。沒有JS在你的鏈接 – JohnP 2011-04-28 15:39:16

這是一個祕密... – Blender 2011-04-28 15:52:09

糟糕，更新的鏈接。 – Fermin 2011-04-28 15:58:28

你可以使用一個setInterval

這裏有一個現場演示：http://jsfiddle.net/jomanlk/9gp3C/1/

var blocks = 10 

var t = setInterval(function(){ 
    if (blocks) { 
     $block = $('<div>').addClass('block') 
     $('#cont').append($block); 
     $block.fadeIn(); 
     blocks--; 
    } else { 
     clearInterval(t); 
    } 

}, 500);

您可以通過使其自動檢測的高度，並在適當的塊停止改善這種而不是有一個固定的計數。

來源

2011-04-28 15:38:27 JohnP

另一個很好的答案，請參閱我上面的評論。 – edwinbradford 2011-04-28 19:59:32

我的$ 0.02：我建議你使用動畫gif作爲背景，而不是用setTimeout阻止執行。

來源

2011-04-28 15:56:24 Aleadam

個人對動畫GIF並不着迷，我發現它們在過去是不可靠的。 – edwinbradford 2011-04-28 20:00:26

回答

相關問題