Question

因此，我的目标是拥有一组li代码并对其进行迭代，并为每个li隐藏的段落进行迭代，然后隐藏它并显示下一个li元素。一旦完成迭代，我想重复这个过程。

我已经尝试过回调函数，但它不起作用，我认为这是因为setTimeout子线程独立于main函数。我不想使用setInterval，因为我不知道有多少 li 标签。

这是js函数：

function animateContents(){
    $('#test li').each(function(i){
        var a = this;

        setTimeout(function(){
            $(a).find('p').slideDown('slow', function(){
                $(this).addClass('in');
            }).delay(1000).slideUp('slow', function(){
                $(this).removeClass('in');
            });
        }, i*2500);
    });
}

这是HTML代码，对于我正在使用Bootstrap的CSS：

<h1>Title</h1>
<ul class="list-unstyled panel-group" id="test">
    <li class="panel panel-default">
        <h4 class="panel-heading panel-title">Title1</h4>
        <p class="panel-body collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias, asperiores aspernatur cupiditate dicta eaque impedit ipsum itaque laboriosam modi officiis perferendis provident quam quisquam, quod saepe sequi similique ut.</p>
    </li>
    <li class="panel panel-default">
        <h4 class="panel-heading panel-title">Title2</h4>
        <p class="panel-body collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias, asperiores aspernatur cupiditate dicta eaque impedit ipsum itaque laboriosam modi officiis perferendis provident quam quisquam, quod saepe sequi similique ut.</p>
    </li>
    <li class="panel panel-default">
        <h4 class="panel-heading panel-title">Title3</h4>
        <p class="panel-body collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias, asperiores aspernatur cupiditate dicta eaque impedit ipsum itaque laboriosam modi officiis perferendis provident quam quisquam, quod saepe sequi similique ut.</p>
    </li>
    <li class="panel panel-default">
        <h4 class="panel-heading panel-title">Title4</h4>
        <p class="panel-body collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias, asperiores aspernatur cupiditate dicta eaque impedit ipsum itaque laboriosam modi officiis perferendis provident quam quisquam, quod saepe sequi similique ut.</p>
    </li>
    <li class="panel panel-default">
        <h4 class="panel-heading panel-title">Title5</h4>
        <p class="panel-body collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias, asperiores aspernatur cupiditate dicta eaque impedit ipsum itaque laboriosam modi officiis perferendis provident quam quisquam, quod saepe sequi similique ut.</p>
    </li>
    <li class="panel panel-default">
        <h4 class="panel-heading panel-title">Title6</h4>
        <p class="panel-body collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias, asperiores aspernatur cupiditate dicta eaque impedit ipsum itaque laboriosam modi officiis perferendis provident quam quisquam, quod saepe sequi similique ut.</p>
    </li>
</ul>

提前致谢。

Answer 1

您可以像所有酷孩子一样使用$.Deferred :) http://jsfiddle.net/tarabyte/2Kdaq/

function animateContents(){
    var promises = $('#test li').map(function(i){
        var a = this, 
            dfd = $.Deferred(); //create a deferred

        console.log(i);

        $(a).find('p')
                .delay(i*2500) //instead of setTimeout
                .slideDown('slow', function(){
                    $(this).addClass('in');
                })
                .delay(1000)
                .slideUp('slow', function(){
                    $(this).removeClass('in');
                    dfd.resolve(); //resolve it
                });

        return dfd.promise(); //return a promise
    }).get();

    console.log(promises); 
    return $.when.apply($, promises); //make a promise that will wait for all
}

(function run() {
    animateContents().done(run); //loop forever   
}());

Answer 2

@Yury Tarabanko已经找到了我的问题的解决方案，但由于我发现承诺/推迟有点令人困惑我决定再挖掘一下我的问题，我找到了解决方案。

这是：

function animateB(elem){
    $(elem).find('p')
        .delay(500)
        .slideDown('slow', function(){
            $(this).addClass('in');
        })
        .delay(2500)
        .slideUp('slow', function(){
            $(this).removeClass('in');
            var n = $(elem).next('li');
            if(n.length == 0)
                n = $('#test li')[0];
            animateB(n);
        });
}

animateB($('#test li')[0]);

干杯

等待函数完成，每个循环都有setTimeout

2 个答案: