Auto-fade - /show zwischen mehreren divs

Was ist ein einfaches jQuery-Skript, das ich laden kann, auf meiner Webseite, die wird auto-fade zwischen jeder der drei "Kasten" divs, und wiederholen? Ich möchte es zeigen, ein div für 5 Sekunden, während versteckt die beiden anderen, dann 1 Sekunde fade-übergang in die nächste.

Den drei div ' s sind derzeit gestapelt auf der jeweils anderen.

<div class="boxes">

<div class="box1">text1</div>
<div class="box2">text2</div>
<div class="box3">text3</div>

</div>
  • Der Schlüssel ist, mit dem die style-Attribute der position, z-index, display und ein setInterval Funktion.
InformationsquelleAutor copyflake | 2013-04-09
  1. 4

    Könnten Sie versuchen, diese:

    $(document).ready(function () {
    var allBoxes = $("div.boxes").children("div");
    transitionBox(null, allBoxes.first());
});

function transitionBox(from, to) {
    function next() {
        var nextTo;
        if (to.is(":last-child")) {
            nextTo = to.closest(".boxes").children("div").first();
        } else {
            nextTo = to.next();
        }
        to.fadeIn(500, function () {
            setTimeout(function () {
                transitionBox(to, nextTo);
            }, 5000);
        });
    }

    if (from) {
        from.fadeOut(500, next);
    } else {
        next();
    }
}

    DEMO: http://jsfiddle.net/CYJLA/

    Ich bin mir sicher, er konnte bereinigt werden und/oder effizienter sein, aber ich legte es zusammen, um es arbeiten.

    • Das ist fast perfekt! 🙂 Es scheint jedoch, warten 15 Sekunden für den ersten übergang zu passieren, und dann 5 Sekunden übergang danach. Ich Frage mich, was gibt es, dass zusätzliche 10 Sekunden am start. hmmmmm.
    • Danke! Hmm habe ich nicht/sehe nicht, dass passiert. Werden Sie sehen, dass passieren, in der fiddle? Für mich, es sofort verblasst in die erste, dann 5 Sekunden später verblasst in den nächsten 5 Sekunden später verblasst in die nächste, dann 5 Sekunden später von vorne beginnt.
    • du hast Recht. Es muss etwas sein, was auf mein Ende, das jsfiddle funktioniert Prima! Ich werde spielen, um mit es 🙂 Danke Ihnen so sehr.
    • Haha okay, gut lassen Sie mich wissen, wenn Sie weitere Hilfe benötigen Integration. Kein problem 🙂
    InformationsquelleAutor Ian
  2. 2

    jQuery Cycle ist einfach zu set-up und können tun, was Sie Fragen.

    Hier ein Beispiel:
    http://jsfiddle.net/n1ck/4PvU7/

    $('.boxes').cycle({
    speed: 1000, //speed of the transition
    timeout: 5000 //milliseconds between slide transitions (0 to disable auto advance) 
});
    • Ich denke, das plugin sieht für die img tag im target-div und Zyklen. Ich glaube nicht, die OP ist in der Lage, ändern Sie entsprechend seinen/Ihren Bedürfnissen.
    • Es ist nicht nur der Zyklus Bilder, wie bereits in der Einleitung: Each child element of the container becomes a "slide". siehe mein Beispiel.
    • Oh, ok. Nevermind. Ich benutzte es viel und in jenen Tagen wird es verwendet, um Arbeit, wie ich bereits in meinem Kommentar.
    InformationsquelleAutor N1ck
  3. 0

    http://jsfiddle.net/Bouillou/UQTY2/52/

    <div class="boxes">
    <div class="fade-effect box1">text1</div>
    <div class="fade-effect box2">text2</div>
    <div class="fade-effect box3">text3</div>
</div>

jQuery.fn.nextOrFirst = function (selector) {
    var next = this.next(selector);
    return (next.length) ? next : this.prevAll(selector).last();
}

$(document).ready(function () {
    $('div.fade-effect').fadeOut(500);

    var fadeInTime = 1000;
    var intervaltime = 5000;

    //First call
    setTimeout(function () {
        fadeMe($('div.fade-effect').first());
    }, intervaltime);

    function fadeMe(div) {
        div.fadeIn(fadeInTime, function () {
            div.fadeOut(fadeInTime);

            //Recursive call
            setTimeout(function () {
                fadeMe(div.nextOrFirst());
            }, intervaltime);
        });
    }
});
    InformationsquelleAutor sdespont
  4. 0
        <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    $(".box2,.box3").css("display","none");
    var a=2;
    function recursive()
    {

    $(".box1,.box2,.box3").css("display","none");  
    $(".box"+a).fadeIn(1000);

    a=Number(a)+1; 
    if(a==4)
    a=1;
    }

    setInterval(function(){recursive()},5000);

    });
    </script>
    </head>
    <body>


    <div class="boxes">

    <div class="box1" c>text1</div>
    <div class="box2">text2</div>
    <div class="box3">text3</div>

    </div>

    </body>
    </html>
    • wenn ich versuche dieses, es zeigt zuerst box1, aber dann nach 5 Sekunden verschwindet alles, und die zweite und Dritte Boxen werden nicht angezeigt. Nur leere.
    InformationsquelleAutor Unknownman
  5. -2

    Hier ist einer der einfachsten Lösung:

    CSS: 

    .boxes { position:relative; height:332px; width:500px; }
.boxes div { position:absolute; left:0; top:0; }

    jQuery: 

    $('.boxes div:gt(0)').hide();
setInterval(function(){
    $('.boxes :first-child').fadeOut().next('div').fadeIn().end().appendTo('.boxes');
}, 3000);

    Arbeiten Demo

    InformationsquelleAutor Eli
Schreibe einen Kommentar