постепенно добавлять элементы списка с помощью jQuery - PullRequest
Новая
       19

постепенно добавлять элементы списка с помощью jQuery

4 голосов
/ 13 апреля 2011

Я создаю страницу портфолио со списком различных проектов (в неупорядоченном списке). При загрузке страницы я хочу, чтобы каждый "li" появлялся один за другим. Я добился этого примерно так: 

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

Проблема, с которой я сталкиваюсь, состоит в том, что у каждого li будет класс (или несколько), основанный на типе работы (web, print и т. Д.), Который он представляет. Существует боковая навигация, которая позволит вам фильтровать тип работы для отображения. Я столкнулся с тем, что, если я нажимаю на фильтры, когда анимация все еще загружается в элементах, все становится действительно грязным.

Вот шаблон рабочей страницы на данный момент: http://jjaakk.miller -interactive.com / шаблоны / work.html

Я пробовал много вещей, но с ограниченным успехом. Есть мысли о том, как сделать эту работу более стабильной?

Я пытался добавить .stop () по клику, но это не сработало, как я планировал.

Ответы [ 3 ]

4 голосов
/ 13 апреля 2011

Я думаю, что проблема была связана с ограничением 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>
3 голосов
/ 13 апреля 2011

Я знаю, что вы сказали, что пытались добавить .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 голосов
/ 13 апреля 2011

Многократная задержка по индексу 

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