我正在构建一个包含不同项目列表的投资组合页面(在无序列表中)。在页面加载时,我想让每个“li”一个接一个地淡入。我这样做了:
var eT = 0;
$('.everything').hide().each(function() {
$(this).delay(eT).fadeIn('slow');
eT += 200;
});
我遇到的问题是每个li都会根据它所代表的工作类型(web,print等)有一个类(或多个)。侧面有一个导航,允许您过滤要显示的工作类型。我遇到的是,如果我点击过滤器,动画仍然加载项目,事情就会变得非常混乱。
以下是当前工作页面的模板: http://jjaakk.miller-interactive.com/templates/work.html
我一直在尝试很多东西,但成功有限。关于如何以更稳定的方式使这项工作的任何想法?
我尝试在点击时添加.stop(),但它没有像我预期的那样工作。
答案 0 :(得分:4)
我认为问题与jQuery delay()的限制有关。以下使用setTimeout建议的标准javascript 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>
答案 1 :(得分:3)
我知道您说过您尝试在点击时添加.stop()。以下代码就是这样,但对我来说效果很好。如果这不是您想要的,请在评论中解释。
<html>
<head>
<script src="/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var eT=0;
$('.everything').hide().each(function() {
$(this).delay(eT).fadeIn('slow');
eT += 200;
});
$('.everything').click(function() {
$('.everything').stop(true,true).fadeIn();
});
});
</script>
<style type="text/css">
li.everything {width:40px;height:40px;background:#bbb;display:inline-block}
</style>
</head>
<body>
<ul>
<li class="everything"></li>
<li class="everything"></li>
<li class="everything"></li>
<li class="everything"></li>
<li class="everything"></li>
</ul>
</body>
</html>
<强> Working Demo
强>
答案 2 :(得分:2)
按索引多次延迟
var eT = 0;
$('.everything').hide().each(function(index) {
$(this).delay(eT*index).fadeIn('slow');
eT += 200;
});