QuickSand，动画卡顿

Question

我花了很长时间研究如何使用和表单来代替href链接在quicksand中工作。现在我面临的问题是动画效果不流畅，我无法使其平滑过渡。一开始还好，但之后又突然跳回了左侧。你可以在以下网址查看在线示例：http://freecss.info/ScreencastTutorials/archive.html。有什么建议吗？我已经想到了很多办法并进行了尝试，但都没有成功。其他脚本是兼容的，我尝试了固定宽度和添加带有overflow:hidden的容器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>

- Michael

---

我们要求发布相关代码的原因是，有一天，那个链接可能无法使用，这个问题（和答案）的价值可能会受到限制。问题应尽可能自我解释，以及任何答案。 - Jared Farrish

我明白，很多代码最初都是从这里获取的，解释了如何使用选项框而不是链接。 - Michael

快沙是什么（除了一个九十年代中期的朋克乐队）？ - Jared Farrish

一个 jQuery 插件 - http://razorjack.net/quicksand/ - Michael

啊，我明白了 - 看起来是一个有趣的插件。 - Jared Farrish

Answer 1

针对迈克尔:

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

要解决这个问题，只需为无序列表添加一个类，并使用CSS为其设置样式。然后使用原始的ID执行jQuery动画，例如：

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

- Jared Farrish

---

@Michael - 希望你能在SO上继续停留，我认为你会成为该网站的优秀贡献者。 :) - Jared Farrish

是的，我以前从未使用过这个网站，没有意识到它有多好。 - Michael

@Michael - 我是通过 Coding Horror Blog 和 Joel Spolsky's blog 找到这个网站的。它真的是一个非常好的网站，可以帮助你 磨练编程交流技巧。 - Jared Farrish