jquery - 最初のdivをfadeOutしてから、2番目のdivをfadeInにします

Question

問題が発生しました。フェードバナーのようなことをする必要があります。1 つの div がフェードアウトし、2 番目の div がフェードインします。コードは次のとおりです。

$(document).ready(function() {
    setTimeout(function() {
        $('#zeus').fadeOut(1000);
     }, 5000);
    $('#zeuss').hide();
    setTimeout(function(){
        $('#zeuss').fadeIn(1000);
    }, 6000);
});

機能しますが、#zeussフェードインした後はここにとどまります。私はそれを繰り返し行う必要があります。jquery 1.3.2 を使用しているため、.delay() の使用を提案しないでください。

編集。 デフォルト#zeusではページに表示されます。フェードアウトしてからフェードインし#zeuss、再びフェードインし#zeusてからフェードアウトし#zeusてフェードインしたい#zeussなど..

score 5 · Accepted Answer

よくあることですが、一般的で拡張可能なソリューションはより単純です。

更新: jfriend00 の提案を採用し、複数のタイマーから完了関数に移動して、時間の経過に伴う累積エラーを排除しました。

/**
 * Fade-cycles elements with class 'banner'
 */
$(document).ready(function() {

    var delay = 3000, fade = 1000; // tweak-able
    var banners = $('.banner');
    var len = banners.length;
    var i = 0;

    setTimeout(cycle, delay); // <-- start

    function cycle() {
        $(banners[i%len]).fadeOut(fade, function() {
            $(banners[++i%len]).fadeIn(fade, function() { // mod ftw
                setTimeout(cycle, delay);
            });
        });
    }

});

jQuery 1.3.2 を使用したデモ

score 2 · Accepted Answer

無限ロールで 2 つの異なる div をフェードインおよびフェードアウトしたいと思います。以下のコードを試して、私に知らせてください。

デモ

$(document).ready(function() {
    var isZeuss = false;
    var $zeus = $('#zeus');
    var $zeuss = $('#zeuss');

    $zeuss.hide();

    setTimeout(function () {//<-- Not sure if you want this 5 sec delay in starting the animation
       setInterval(function() {
         var $fadeOutBanner = (isZeuss)?$zeuss:$zeus;
         var $fadeInBanner = (isZeuss)?$zeus:$zeuss;

         $fadeOutBanner.fadeOut(1000, function () {
             $fadeInBanner.fadeIn(1000);
             isZeuss = !isZeuss;
         });
       }, 2000);
     }, 5000); //<-- Not sure if you want this         
});

編集：fadeIn/fadeOutタイマーまたはタイマーを増やして、setInterval移行を遅くすることができます。

score 1 · Accepted Answer

わかり.delay()ました。1つのアニメーションの開始を使用して前のアニメーションの正確な完了にリンクせずに（タイマーとアニメーションの同期に依存せずに）、この繰り返しシーケンスでアニメーションを実装します。

ゼウスは見える、ゼウスは見えない
5秒間一時停止
フェードアウトゼウス
フェードインゼウス
フェードアウトゼウス
フェードインゼウス
繰り返す

あなたはこのようにそれを行うことができます：

$(document).ready(function() {
    var z1 = $('#zeus');
    var z2 = $('#zeuss').hide();

    function cycle() {
        setTimeout(function() {
            z1.fadeOut(1000, function() {
                z2.fadeIn(1000).fadeOut(1000, function() {
                    z1.fadeIn(1000, cycle)
                });
            });
        }, 5000);
    }
    cycle();
});

最初のサイクルの前に5秒間だけ休止し、次のサイクルでは休止したくない場合（あなたの質問では完全に明確ではなかったもの）、次のようになります。

$(document).ready(function() {
    var z1 = $('#zeus');
    var z2 = $('#zeuss').hide();

    function cycle() {
        z1.fadeOut(1000, function() {
            z2.fadeIn(1000).fadeOut(1000, function() {
                z1.fadeIn(1000, cycle)
            });
        });
    }
    // start the fadeIn/fadeOut cycling after 5 seconds
    setTimeout(cycle, 5000);
});

参考までに、名前の選択zeusはzeussひどく混乱しています。それらを混乱させるのは非常に簡単で、コードを間違えるのは非常に簡単です。

を使用できるより新しいバージョンのjQueryを使用する.delay()場合は、少し簡単になります。

$(document).ready(function() {
    var z1 = $('#zeus');
    var z2 = $('#zeuss').hide();

    function cycle() {
       z1.delay(5000).fadeOut(1000, function() {
           z2.fadeIn(1000).fadeOut(1000, function() {
               z1.fadeIn(1000, cycle)
           });
       });
    }
    cycle();
});

score 1 · Accepted Answer

これは、1 つのバナーが表示された状態で始まり、フェードアウト、イン、遅延などを開始します... http://jsfiddle.net/TtPFc/1/

#zeus { background-color: blue; color: white; display:none}
#zeuss { background-color: red; color: white; }


<div id="zeus">Zeus Banner</div>
<div id="zeuss">Zeuss Banner</div>


$(document).ready(function() {
    var zeus    =  $('#zeus'), 
        zeuss   =  $('#zeuss'),
        forward = true;

    setInterval(function() {
        if (forward) {
           zeus.fadeOut(1000, function() { zeuss.fadeIn(1000); });
        }
        else { 
           zeuss.fadeOut(1000, function() { zeus.fadeIn(1000); });
        }

        forward = !forward;

     }, 5000);
});

score 0 · Accepted Answer

zeusfadeIn と zeusfadeOut を作成するとどうなりますか? zeusfadeIn はフェードインして zeusfadeOut を呼び出します zeusfadeOut はフェードアウトして zeusfadeIn を呼び出します

jquery - 最初のdivをfadeOutしてから、2番目のdivをfadeInにします

5 に答える 5

Related

Reference