4

現在のコード:

$(window).load(function(){
var div1 = $("#apDiv1");
var div2 = $("#apDiv2");

function fade() {
    div1.stop(true, true).fadeIn(2000);
    div2.stop(true, true).fadeOut(2000, function() {
        // swap in/out
        var temp = div1;
        div1 = div2;
        div2 = temp;
        // start over again
        setTimeout(fade, 1000);
    });
}

// start the process
fade(); })

これは 2 つの div でうまく機能しますが、回転に 3 つ目の div を挿入することは可能ですか?

私は次のように試しました：

   $(window).load(function(){
var div1 = $("#apDiv1");
var div2 = $("#apDiv2");
var div3 = $("#apDiv3");

function fade() {
    div1.stop(true, true).fadeIn(2000);
    div2.stop(true, true).fadeOut(2000);
    div3.stop(true, true).fadeIn(2000);
    div1.stop(true, true).fadeOut(2000, function() {
        // swap in/out
        var 
        temp = div1
        div1 = div2;
        div2 = div3;
        div3 = div1;
        div1 = temp
        // start over again
        setTimeout(fade, 1000);
    });
}

// start the process
fade(); })

しかし、それはそれをスキップするだけです/まったく機能しません。

4

5 に答える 5

13

公平を期すために、2つ以上のdivを使用する場合は、その関数を書き直して、3つのdivだけでなく任意の量を実行できるようにします

私はあなたのdivがこのように見えると仮定しました（私はそれらにのクラスを与え、最初のクラスはのクラスを持っていfadeますcurrent）

<div id="apDiv1" class="fade current"></div>
<div id="apDiv2" class="fade"></div>
<div id="apDiv3" class="fade"></div>

この構造を考えると、次の jquery を 内で使用できますwindow.load。

var divs = $('.fade');

function fade() {
    var current = $('.current');
    var currentIndex = divs.index(current),
        nextIndex = currentIndex + 1;

    if (nextIndex >= divs.length) {
        nextIndex = 0;
    }

    var next = divs.eq(nextIndex);

    next.stop().fadeIn(2000, function() {
        $(this).addClass('current');
    });

    current.stop().fadeOut(2000, function() {
        $(this).removeClass('current');
        setTimeout(fade, 2500);
    });
}

fade();

例

于 2013-05-20T11:42:57.323 に答える
0

最初の div で変更を見逃す:

jsFiddle: http://jsfiddle.net/M4ddY/4/

<script>
    $(window).load(function(){
        var div1 = $("#apDiv1");
        var div2 = $("#apDiv2");
        var div3 = $("#apDiv3");

    function fade() {
        div1.stop(true, true).fadeIn(2000);
        div2.stop(true, true).fadeOut(2000);
        div3.stop(true, true).fadeIn(2000, function() {
            // swap in/out
            var temp= div1;
            div1 = div2;
            div2 = div3;
            div3 = temp;
            // start over again
            setTimeout(fade, 1000);
           });
       }

       // start the process
       fade(); 
    });
</script>
于 2013-05-20T11:06:04.537 に答える
0

私の提案 ( http://jsfiddle.net/skjHN/で入手可能):

function rotateFade() {
    var toFadeOut = $('[id^=apDiv].current');
    var toFadeIn = $('[id^=apDiv].current + [id^=apDiv]');
    toFadeIn = toFadeIn.length ? toFadeIn : $('[id^=apDiv]:first-child');

    toFadeOut.removeClass('current').fadeOut(2000);
    toFadeIn.addClass('current').fadeIn(2000);

    setTimeout(rotateFade, 1000);
}

// start the process
rotateFade();
于 2013-05-20T12:32:13.667 に答える