QuickSand, animation stuttery

Question

I have spend ages figuring out how to get quicksand to work with a select and option form instead of href links. Now I have a problems because the animation is stuttery. I can't get it smooth. It starts off alright then snaps back to the left. You can see an online example:

http://freecss.info/ScreencastTutorials/archive.html

Any ideas? I have thought of many things and experimented but no luck. Other scripts are compatible, tried changing to fixed widths and tried add a holder div with overflow:hidden.

Relevant jquery:

var $holder = $('ul#archive-full');
var $data = $holder.clone();
var mySelect = $('#mySelect');
mySelect.change(function() {
    var index = mySelect[0].selectedIndex;
    var element = mySelect[0].options[index];
    var $filterType = $(element).attr('value')
    if ($filterType == 'all') {
        var $filteredData = $data.find('li:not(li ul li)');
    }
    else {
        var $filteredData = $data.find('li[data-type~="' + $filterType + '"]');
    }
    $holder.quicksand($filteredData, {
        duration: 800,
        easing: 'easeInOutQuad'
    });
    return false;
});

Relevant HTML

<select name="mySelect" id="mySelect" selected value="all">
 <option name="all" value="all">Free & Premium</option>
 <option name="free" value="free">Free Only</option>
 <option name="premium" value="premium">Premium Only</option>
</select>
<ul id="archive-full">
 <li data-id="id-1" data-type="all premium">/li>
</ul>

Please post the relevant code, markup and/or CSS in your question. A http://jsfiddle.net/ demonstrating the problem would be good, too. :) — Jared Farrish, Jun 19 '11 at 20:25
I posted a link to the current problem in action which contains the code. I don't believe it is a javscript error, although I may be wrong. Seems more likely to be CSS related. — Michael, Jun 19 '11 at 20:30
The reason we ask that relevant code be posted is that one day, that link may not work and the value of this question (and answers) may be limited. The question should be as self-explanatory as possible, as well as any answers. — Jared Farrish, Jun 19 '11 at 20:33
I understand, a lot of the code was originally sourced from here explaining how to use an option box rather than links. — Michael, Jun 19 '11 at 20:37
What is Quicksand (other than a [mid-nineties punk band](http://www.youtube.com/watch?v=HGPzJs1WK88))? — Jared Farrish, Jun 19 '11 at 20:38
Aha, I think I have worked it out, thanks to a similar questions on this website. It was worded differently but had the same tag. Reason being, your should style the ul with a class which is separate from ID which you use to style with jquery. — Michael, Jun 19 '11 at 20:48
@Michael - If you have an answer, you can put it as an answer to your own question, wait 10-15 minutes, then mark that as the right answer. — Jared Farrish, Jun 19 '11 at 20:49
@Jared Farrish - I can't self answer before 8 hours, feel free to post the following as the answer:The problem was using the same ID to style the unordered list and to animate the unordered list using jQuery. To solve this simply add a class to the unordered list and use this to style it using CSS. Then use the original ID to perform the jQuery animation, eg: — Michael, Jun 19 '11 at 20:53
@Michael - I added it as an answer, although I'm not real sure what it means... :P — Jared Farrish, Jun 19 '11 at 20:56

score 4 · Accepted Answer · edited Jun 19 '11 at 20:59

4

For Michael:

The problem was using the same ID to style the unordered list and to animate the unordered list using jQuery.

To solve this, simply add a class to the unordered list and use this to style it using CSS. Then use the original ID to perform the jQuery animation, eg:

<ul id="archive-full" class="archive-style">

edited Jun 19 '11 at 20:59

Michael

35
3

answered Jun 19 '11 at 20:55

Jared Farrish

48,585
17
95
104

@Michael - I hope you stick around on SO, I think you'll be a good contributor to the site. :) – Jared Farrish Jun 19 '11 at 21:00
Yes I had never used this website before, didn't realize how great is it. – Michael Jun 19 '11 at 21:09
@Michael - I found it through the [Coding Horror Blog](http://www.codinghorror.com/blog/) and [Joel Spolsky's blog](http://www.joelonsoftware.com/). It's really a pretty good site for [honing your programming communications skills](http://www.codinghorror.com/blog/2011/02/how-to-write-without-writing.html). – Jared Farrish Jun 19 '11 at 21:12

QuickSand, animation stuttery

1 Answers1