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が述べたように、遅延を実装する代わりに、フェードイン完了でコールバックを使用します

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

promise 関数を使用すると、これを簡単かつ簡単に行うことができます。

于 2013-06-24T14:21:16.993 に答える