1

私はこの http://jsfiddle.net/3KydB/ を使用し、3 div 用に変更しようとしました:

window.switchIn = function () {
    $('.chart_1').fadeToggle(function() {
        $('.chart_2').fadeToggle(function() {
            $('.chart_3').fadeToggle(function() {
                setTimeout(function() {window.switchOut();}, 6000);
            });
         });
    });

}

window.switchOut = function () {
  $('.chart_3').fadeToggle(function() {  
    $('.chart_2').fadeToggle(function() {
        $('.chart_1').fadeToggle(function() {
            setTimeout(function() {window.switchIn();}, 6000);
        });
      });  

    });

}

setTimeout(function() {window.switchIn();}, 6000)

最初のものはうまくフェードインおよびフェードアウトし、次に2番目のものはその下の3番目のものでフェードインし、最初のものに戻ります.

4

1 に答える 1

-1

次のようなものが必要だと思います: http://jsfiddle.net/mEeAt/

window.switch1 = function () {
    $('.chart_3').fadeToggle(function() {
        $('.chart_1').fadeToggle(function() {
            setTimeout(window.switch2, 6000);
        });
    });

}

window.switch2 = function () {
    $('.chart_1').fadeToggle(function() {
        $('.chart_2').fadeToggle(function() {
            setTimeout(window.switch3, 6000);
        });
    });
}

window.switch3 = function () {
    $('.chart_2').fadeToggle(function() {
        $('.chart_3').fadeToggle(function() {
            setTimeout(window.switch1, 6000);
        });
    });
}

setTimeout(window.switch2, 6000)

したがって、各関数は、アクティブな要素のフェードアウト、次の要素のフェードイン、およびサイクル内の次の関数のタイムアウトの設定を担当します。

もちろん、ここには多くの繰り返しコードがあるため、これをより一般的なものにする関数を作成する方がよいでしょう: http://jsfiddle.net/mEeAt/1/

function cycle(delay) {
    var elements = Array.prototype.slice.call(arguments, 1);
    var functions = [];
    for (var i = 0; i < elements.length; i++) {
        functions.push(function (i) {
            var prev = i === 0 ? elements.length - 1 : i - 1;
            var next = (i + 1) % elements.length;
            return function() {
                elements[prev].fadeToggle(function() {
                    elements[i].fadeToggle(function() {
                        setTimeout(functions[next], delay);
                    });
                });
            };
        }(i));
    }
    functions[1]();  // start cycle by fading in the second element
}
cycle(6000, $('.chart_1'), $('.chart_2'), $('.chart_3'));
于 2013-08-14T15:27:03.543 に答える