javascript - QuickSand，动画卡顿

Question

我花了很长时间弄清楚如何获得 quicksand使用选择和选项表单而不是 href 链接。现在我有一个问题，因为动画是卡顿的。我不能让它顺利。它开始时很好，然后突然回到左边。可以看一个在线例子:

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

有什么想法吗？我想到了很多事情并进行了实验，但没有运气。其他脚本是兼容的，尝试更改为固定宽度并尝试添加一个带有 overflow:hidden 的 holder div。

相关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;
});

相关的 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>

Answer 1

迈克尔:

问题在于使用相同的 ID 来设置无序列表的样式并使用 jQuery 为无序列表设置动画。

要解决这个问题，只需将一个类添加到无序列表并使用它使用 CSS 对其进行样式设置。然后使用原始ID执行jQuery动画，eg:

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