jQuery Quicksand：在JS加載導致生澀行爲後應用CSS

Question

我使用jQuery Quicksand插件按日期篩選列表。

我得到它的工作在給出的例子，但是，過濾器被應用到其載荷block，然後一旦所有的項目都加載CSS float:left應用<li>項目。讓整個過程看起來有點跳躍和混亂。

我無法弄清楚的是，爲什麼這種情況不會發生在流沙網站上的例子 - 其中列表消失，然後順利重新出現。我仔細研究了CSS，並嘗試了許多變體duration和easing，但發生同樣的事情。

Answer 1

問題是CSS被應用到了jQuery所依賴的ID上。因此，每次有任何jQ操作時，樣式都會重新加載。通過應用一個CSS來執行的課程，兩者保持分離，因此立即應用了這種風格。

即 <ul id="magazines"> jQ代理#magazines和CSS也代理#magazines導致加載延遲。

<ul id="magazines" class="mag-list">與jQ作用於#magazines和CSS作用於.mag-list是要走的路。

Answer 2

答案是，你的li的css應該始終是float：left。這應該被硬編碼到你的樣式表中。您應該使用JS隱藏ul，創建加載了內容的li，然後顯示ul。

事實上，所有的CSS都應該硬編碼到樣式表中，隱藏ul，加載lis，顯示ul。

這樣做可以更容易地設置漸進式增強功能，因此沒有js的用戶可以訪問相同的內容，但不使用動畫。

首先UL不會被隱藏，因爲這是通過使用js來完成的。所以你所要做的就是讓單選按鈕作爲非js用戶的錨點，當他們點擊它時，將查詢字符串添加到可以通過get方法訪問的url中，你可以將它工作到現有的ajax後端。

然後交換你的js中單選按鈕的鏈接。