Question

如何使用delay（）使用$ .each（）迭代JSON？我希望每个图像使用fadeIn（）和fadeOut（）显示3秒钟。

// 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（）时添加该索引。我非常肯定你可以使用.delay（time）.fadeIn（）来延迟“.fadeIn（）”动画。所以，如果你想在3秒之后fadeIn（），然后fadeOut，你应该做这样的事情：

$(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);
   })
})

希望这有帮助。

$ .each with delay（）over JSON source

2 个答案: