jQuery Quicksand: CSS applied after JS load causes jerky behaviour

Question

I'm using the jQuery Quicksand plugin to filter a list by dates.

I've got it working as in the examples given, however, the filter is applied to <li> items which load as block and then once all the items have loaded the float:left CSS is applied. Making the whole process look a little jumpy and messy.

What I can't figure out is why that doesn't happen to the examples on the Quicksand site -where lists disappear and then re-appear smoothly. I've looked closely at the CSS and tried many variants of duration and easing but the same thing happens.

Answer 1

The problem was the CSS was applied to the ID that the jQuery was acting upon. Therefore each time there was any jQ manipulation the style was reloaded. By also applying a class, on which the CSS acted, the two were kept separate and therefore the style was immediately applied.

i.e. <ul id="magazines"> with jQ acting on #magazines and CSS also acting #magazines caused the delay in loading.

<ul id="magazines" class="mag-list">with jQ acting on #magazines and CSS acting on .mag-list is the way to go.

Answer 2

The answer is, that your li's css should always be float:left. This should be hardcoded into you style sheet. You should hide the ul using JS, create the li's loaded with content, and then show the ul.

In fact all the css should be hardcoded into the stylesheet, hide the ul, load the lis, show the ul.

Doing it this way makes it easier to set up progressive enhancement, whereby users without js can access the same content, but without the animations.

For a start the UL won't be hidden, because that is done, using js. So then all you have to do is have the radio buttons as anchors for non js users, when they click it adds a query string onto the url, which is accessed via the get method, you could probably work this into existing ajax backend.

You then swap the links for radio buttons in your js.