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.