Question

我有一个JSON对象，它基本上是一个'项目'数组，并且每个项目中都有不同数量的图像。我希望能够循环外部（项目）数组，然后逐渐淡出每个数组。但是在淡入淡出之后，我希望能够在外部数组淡出并淡入下一个项目之前循环显示其相关图像（幻灯片）。

我遇到的问题是让动态设置的延迟时间正常工作。下一个项目不会等待前一个项目完成，最后一个项目显示方式为时已晚。从查看我的代码可以看出，我很难理解整个时序方面。

<div class="delayDisplay"></div>

<div class="info">
    div 1
    <div class="img">1</div>
    <div class="img">2</div>
    <div class="img">3</div>
</div>

<div class="info">
    div 2
    <div class="img">1</div>
    <div class="img">2</div>
</div>

<div class="info">
    div 3
    <div class="img">1</div>
    <div class="img">2</div>
    <div class="img">3</div>
<div class="img">4</div>
</div>


$(document).ready(function() {

$('.info').each(function(index) {

    var info = $(this);  
    var img = info.children('.img');
    var transDur = 500;
    var imgDur = 2000;
    var galLegnth = img.length;
    var infoDelay = ((transDur * 2) + imgDur) * galLegnth + 200;

    setInterval(function() {

        info.fadeIn(transDur, function() {
            $('.delayDisplay').text(infoDelay);

            img.each(function(i) {  

                curImg = $(this);
                console.log(curImg.text());

                //curImg.delay(1200).show();

                setTimeout(function() {
                    curImg.fadeIn(500).delay(1000);
                }, 2000 * i);

            });

        }).delay(infoDelay).fadeOut(transDur);

    }, infoDelay * index);

});

});

请记住，请不要评论询问原因，但我正在努力避免创建功能来立即执行此操作。是的，正在正确处理JSON数据。正如您所看到的，此时我唯一的问题是了解时机。

Answer 1

而不是实现延迟，因为@adeneo提到在fadein Complete上使用回调

http://api.jquery.com/promise/#example-1

使用promise功能可以让您轻松，轻松地完成此操作。

jquery迭代包含另一个数组的数组，使用动态设置的延迟进行迭代

1 个答案: