gpt4 book ai didi

jquery - 使用 jQuery 按顺序淡入列表项

转载 作者:行者123 更新时间:2023-11-30 23:58:21 26 4
gpt4 key购买 nike

我正在构建一个投资组合页面,其中包含不同项目的列表(在无序列表中)。在页面加载时,我想让每个“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 setTimeoutclearTimeout正如 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com