我正在构建一个投资组合页面，其中包含不同项目的列表(在无序列表中)。在页面加载时，我想让每个“li”一个接一个地淡入。我已经实现了这样的目标:
var eT = 0;
$('.everything').hide().each(function() {
$(this).delay(eT).fadeIn('slow');
eT += 200;
});
我遇到的问题是，每个 li 都会根据其代表的工作类型(网络、打印等)拥有一个(或多个)类。侧面有一个导航，可让您过滤要显示的作品类型。我遇到的是，如果我单击过滤器，而动画仍在项目中加载，事情就会变得非常困惑。
当前工作页面模板如下: http://jjaakk.miller-interactive.com/templates/work.html
我尝试过很多事情，但成效有限。关于如何使这项工作以更稳定的方式进行有什么想法吗？
我尝试在点击时添加 .stop()，但它没有按我的预期工作。
最佳答案
我认为问题与 jQuery Delay() 的限制有关。以下使用标准 javascript setTimeout和 clearTimeout正如 jQuery delay() api 所建议的.
<html>
<head>
<script src="./jquery-ui-1.8.7.custom/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var timeOuts = new Array();
var eT=200;
function myFadeIn(jqObj) {
jqObj.fadeIn('slow');
}
function clearAllTimeouts() {
for (key in timeOuts) {
clearTimeout(timeOuts[key]);
}
}
$('.everything').hide().each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
$('#something').click(function() {
clearAllTimeouts();
$('.everything').stop(true,true).hide();
$('.something').each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
});
});
</script>
<style type="text/css">
li.everything {width:40px;height:40px;background:#bbb;display:inline-block}
li.something {width:80px;height:80px;background:#000;display:inline-block}
</style>
</head>
<body>
<button id="something">BLACK</button>
<ul>
<li class="everything"></li>
<li class="everything something"></li>
<li class="everything"></li>
<li class="everything something"></li>
<li class="everything"></li>
<li class="everything something"></li>
<li class="everything"></li>
<li class="everything something"></li>
<li class="everything"></li>
<li class="everything something"></li>
</ul>
</body>
</html>
关于jquery - 使用 jQuery 按顺序淡入列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5643383/