【发布时间】：2011-09-18 06:59:03
【问题描述】：
我花了很长时间弄清楚如何让 quicksand 使用选择和选项表单而不是 href 链接。现在我有一个问题，因为动画是断断续续的。我不能顺利。它开始很好，然后突然回到左边。可以看网上的例子：
http://freecss.info/ScreencastTutorials/archive.html
有什么想法吗？我想了很多事情并进行了实验，但没有运气。其他脚本是兼容的，尝试更改为固定宽度并尝试添加一个带有溢出的容器 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>
【问题讨论】：
-
请在您的问题中发布相关代码、标记和/或 CSS。一个jsfiddle.net 证明这个问题也很好。 :)
-
我发布了一个指向当前问题的链接，其中包含代码。我不相信这是一个 javscript 错误，尽管我可能是错的。似乎更可能与 CSS 相关。
-
我们要求发布相关代码的原因是有一天，该链接可能无法正常工作，并且此问题（和答案）的价值可能会受到限制。问题和任何答案都应尽可能不言自明。
-
我明白了，很多代码最初来自这里，解释如何使用选项框而不是链接。
-
什么是流沙（mid-nineties punk band 除外）？
标签： javascript jquery jquery-plugins quicksand