javascript-QuickSand,动画断断续续
作者:互联网
我花了很长时间才弄清楚如何使quicksand与select和option表单而不是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>
解决方法:
对于迈克尔:
问题是使用相同的ID设置无序列表的样式,并使用jQuery设置无序列表的动画.
要解决此问题,只需将一个类添加到无序列表,然后使用此样式来使用CSS对其进行样式设置.然后使用原始ID执行jQuery动画,例如:
<ul id="archive-full" class="archive-style">
标签:quicksand,jquery-plugins,javascript,jquery 来源: https://codeday.me/bug/20191102/1991912.html