使用jQuery按顺序淡入列表项

时间:2011-04-13 01:13:09

标签: jquery fadein sequential

我正在构建一个包含不同项目列表的投资组合页面(在无序列表中)。在页面加载时,我想让每个“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(),但它没有像我预期的那样工作。

3 个答案:

答案 0 :(得分:4)

我认为问题与jQuery delay()的限制有关。以下使用setTimeout建议的标准javascript clearTimeoutjQuery 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;
    });