0

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

我遇到的问题是让动态设置的延迟时间正常工作。下一个项目不会等待前一个项目完成，而最后一个项目出现得太晚了。查看我的代码很明显，我很难理解整个时序方面。

JSfiddle 在这里。

<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 数据正在被正确处理。正如你所看到的，我目前唯一的问题是了解时机。

4

1 回答 1

0

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

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

使用 promise 函数可以让你轻松无痛地做到这一点。

于 2013-06-24T14:21:16.993 回答