使用jQuery按顺序淡入列表项_Jquery_Fadein_Sequential

使用jQuery按顺序淡入列表项

jquery

使用jQuery按顺序淡入列表项,jquery,fadein,sequential,Jquery,Fadein,Sequential,我正在构建一个公文包页面，其中包含不同项目的列表（无序列表）。在页面加载时，我想让每个“li”一个接一个地淡入。我是这样做到的： var eT = 0; $('.everything').hide().each(function() { $(this).delay(eT).fadeIn('slow'); eT += 200; }); 我遇到的问题是，每个li都有一个（或多个）基于其所代表的工作类型（web、打印等）的类。侧边有一个导航，允许您过滤要显示的工作类型。我遇

我正在构建一个公文包页面，其中包含不同项目的列表（无序列表）。在页面加载时，我想让每个“li”一个接一个地淡入。我是这样做到的：

var eT = 0;     
$('.everything').hide().each(function() {
    $(this).delay(eT).fadeIn('slow');
    eT += 200;
});

我遇到的问题是，每个li都有一个（或多个）基于其所代表的工作类型（web、打印等）的类。侧边有一个导航，允许您过滤要显示的工作类型。我遇到的是，如果我单击过滤器，而动画仍在加载项目，事情会变得非常混乱

以下是当前工作页面的模板：

我尝试了很多事情，但成功有限。关于如何使这项工作更加稳定，有什么想法吗

我尝试在单击时添加.stop（），但它没有按我的预期工作。

按索引多次延迟

 var eT = 0;     
    $('.everything').hide().each(function(index) {
        $(this).delay(eT*index).fadeIn('slow');
        eT += 200;
    });

我知道您说过您尝试在单击时添加.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>


$（文档）.ready（函数（）{
var-eT=0；
$（'.everything'）.hide（）.each（函数（）{
$（this.delay（eT.fadeIn）（'slow'）；
eT+=200；
});
$（'.everything'）。单击（函数（）{
$（'.everything'）.stop（true，true.fadeIn（）；
});
});
li.everything{宽度：40px；高度：40px；背景：#bbb；显示：内联块}

我认为问题与jQuery delay（）的限制有关。下面使用标准javascript，并按照


$（文档）.ready（函数（）{
var超时=新数组（）；
var-eT=200；
函数myFadeIn（jqObj）{
jqObj.fadeIn（“慢”）；
}
函数clearAllTimeouts（）{
用于（输入超时）{
clearTimeout（超时[键]）；
}
}
$（'.everything'）.hide（）.each（函数（索引）{
超时[index]=setTimeout（myFadeIn，index*eT，$（this））；
});
$（“#某物”）。单击（函数（）{
ClearAllTimeout（）；
$（'.everything'）.stop（true，true.hide（）；
$（'.something'）。每个（函数（索引）{
超时[index]=setTimeout（myFadeIn，index*eT，$（this））；
});
});
});
li.everything{宽度：40px；高度：40px；背景：#bbb；显示：内联块}
某物{宽度：80px；高度：80px；背景：#000；显示：内联块}
黑色

这不起作用。它所做的是增加每个负载的延迟计时器。。。绝对不是我想做的事！：）我测试了你的代码，但这并不是我想要做的。是的，我想按顺序加载LI。但是点击事件发生在导航上，而不是李的自己。我把所有的工作都做好了。问题是，当您在fadein仍在进行时单击其中一个过滤器时，会出现重叠动画。我希望单击以终止当前动画，隐藏所有列表项，然后仅显示基于过滤器的列表项。如果您转到：并快速单击“show me”下的链接，您将了解我的意思。这是我的函数：

code$（'#secondary ul li a'）。单击（function（）{var llid=$（this）.attr（'id'）；var eT=0；$（'.+llid）。每个（function（）{$（'.everythis'）.hide（））；$（this）。delay（eT）。fadeIn（'slow'）；eT+=200；}）我明白你对重叠动画的意思。我认为这个问题与jquery delay（）的限制有关。请参见示例上方的框。我发布了第二个答案，使用标准的javascript setTimeout和clearTimeout。谢谢！我将不得不对此进行更多的分析，以便我了解正在发生的一切，但从我的初始测试来看，它似乎工作得非常完美！我真的非常感谢你的帮助！示例链接已断开
<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>