0

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

ありがとう！

4

2 に答える 2

1

配列の最後に達した後も継続的に実行したい場合は、setInterval() を使用するのが最善です。次に、インクリミネーターを使用して次の 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();
于 2013-03-27T20:11:22.500 に答える
0

$.each(function(i,e) {}) には、現在のアイテムのインデックスである「i」パラメーターが含まれます。これを行う最善の方法は、delay() の計算にそのインデックスを追加することです。.delay(time).fadeIn() を使用して「.fadeIn()」アニメーションを遅らせることができるという事実については、かなり肯定的です。したがって、何かを fadeIn() してから 3 秒後に 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);
   })
})

お役に立てれば。

于 2013-03-27T19:48:49.140 に答える