javascript - $.each 与 JSON 源的 delay()

Question

如何使用 delay() 使用 $.each() 遍历 JSON？
我希望每个图像使用fadeIn() 和fadeOut() 显示3 秒。

JSFiddle：http: //jsfiddle.net/8x6rR/23/

// JSON source
var sponzorji = [{
    logo: "http://dijaki.gimvic.org/2a/stara/miha/javascript/slider/img/interspar.png",
    link: "http://www.center-vic.si/",
    naziv: "Interspar Vič"
}, {
    logo: "http://dijaki.gimvic.org/2a/stara/miha/javascript/slider/img/plesna_sola_urska.png",
    link: "http://www.urska.si/",
    naziv: "Plesna Šola Urška"
}, {
    logo: "http://dijaki.gimvic.org/2a/stara/miha/javascript/slider/img/sae.png",
    link: "http://ljubljana.sae.edu/sl/home/",
    naziv: "SAE Ljubljana"
}];

// HTML
var linkEl = $("a#link"),
    imgEl = $("img#slika");

    // mainLoop
    function mainLoop() {
        $(sponzorji).each(function (index) {

            linkEl.attr("href", this.link).find(imgEl).attr({
                src: this.logo,
                alt: this.naziv
            });

            // Recursive
            if (index == sponzorji.length - 1) {
                mainLoop();
            }

        });

    } // end mainLoop

mainLoop();

谢谢！

Answer 1

如果您希望它在到达数组末尾后继续运行，那么最好使用 setInterval()。然后，您可以使用 incriminator 来计算下一个 json 对象的数量，并使用模数和 .length 当您到达最后一项时，您可以从 0 开始。这是一个更新的jsFiddle。

var linkEl = $("a#link"),
    imgEl = $("img#slika"),
    inc = 0;

imgEl.hide();

function mainLoop() {
    setInterval(function () {
        imgEl.fadeOut(function () {
            inc = inc % sponzorji.length
            linkEl.attr("href", sponzorji[inc].link).find(imgEl).attr({
                src: sponzorji[inc].logo,
                alt: sponzorji[inc].naziv
            }).fadeIn();
        });
        inc++
    }, 3000);
}
mainLoop();

Answer 2

$.each(function(i,e) {}) 包含“i”参数，它是当前项目的索引。最好的方法是在延迟（）的计算中添加该索引。我非常肯定您可以使用 .delay(time).fadeIn() 延迟“.fadeIn()”动画。因此，如果您想在 3 秒后淡入淡出（）然后淡出，您应该执行以下操作：

$(something with images).each(function(i,e) {
   // i*3800 returns 0 on the first index, which starts the animation automaticly.
   // 3800 is 3seconds + 400 fadeIn() animation + 400 fadeOut() animation
   // fadeOut() animation is in the callback so the 3seconds 'delay' should be set there.
   $(this).delay(i*3800).fadeIn(400, function() {
      $(this).delay(3000).fadeOut(400);
   })
})

希望这可以帮助。