JQuery animate-Liste Elemente in der Folge, dann fade-out-Liste und wiederholen Sie

Ich habe eine Abfolge von Ereignissen, die ich versuche zu erstellen mit jQuery-aber ich bin jämmerlich versäumt.

Habe ich eine Reihe von Listen mit einer Zahl der Liste der Elemente in jeder Liste. Die Liste der Ereignisse, die ich versuche zu erreichen, ist wie folgt:

Fade-in Liste 1 > Animieren Liste 1, Position 1 > Animieren Liste 1 Element 2 usw....
Fade-out-Liste 1
Fade-in Liste 2 > Animieren, Liste 2, Position 1 > Animieren Liste 2 Position 2 usw...
Fade-out Liste 2 usw...

Dieser würde dann die Schleife über und über.

Meine aktuellen jQuery ist wie folgt:

$('ul').each(function() {
    $(this).children().each(function(i) {
        $(this).delay((i++) * 2000).animate({left:0, opacity:1});
    });
});

Habe ich einen jsfiddle http://jsfiddle.net/zp240znv/ skizziert, wie weit ich bekommen haben, doch es ist beklagenswert fehlt, so dass jede Hilfe wird sehr geschätzt.

Danke

ist dies den gewünschten Effekt zu erzielen? jsfiddle.net/zp240znv/3
es ist ein bisschen schwierig, aber es ist kurz und richtig. Sie sollten wahrscheinlich poste es als Antwort...
es gibt nur ein problem mit meinem quick-fix, es verzögert 2000ms nach dem ersten element der nächsten Liste angezeigt wird, sind Sie ok mit, dass?
ich habe eine Antwort, mit beiden Versionen (code und link zum fiddle)
Wow, wunderbare Antwort, danke 🙂 ich werde durch Sie sehen und akzeptieren eine Antwort so schnell wie möglich. Dank
Dies ist ein sehr schönes snipet, funktioniert sehr gut für mich-tanks!

InformationsquelleAutor David Brooks | 2014-09-11

Können Sie rekursive Funktionen. Eine Funktion könnte Durchlaufen der übergeordneten Listen, während der zweite wird Durchlaufen und jedes Element in jeder Liste:

function AnimateList($listItems, index, callback) {
    if (index >= $listItems.length) {
        $listItems.closest("ul").fadeOut(function() {
            $listItems.css("left","400px").css("opacity",0); //reset
            callback(); //next list
        });
        return;
    }

    $listItems.eq(index).animate({left:0, opacity:1}, function() {
        AnimateList($listItems, index+1, callback)
    });
}

function FadeLists($lists, index) {
    if (index >= $lists.length) index = 0;

    var $currentList = $lists.eq(index);
    $currentList.fadeIn(function() {
        AnimateList($currentList.find("li"), 0, function() { FadeLists($lists, index + 1) });
    }) 
}

var $allLists = $("ul")
FadeLists($allLists, 0);

Fiddle hier: http://jsfiddle.net/zp240znv/16/

Das ist großartig, vielen Dank. Ich haben sich geändert es leicht, Sie zu verlangsamen ein bisschen, aber dass Sie so viel für diese 🙂

InformationsquelleAutor Stryner

Wunsch @Regent, die Veröffentlichung meiner Antwort zusammen mit einer aktualisierten Geige, die beseitigt auch die Verzögerung bei der Anzeige des zweiten Elements des >0 index-Listen.

ALTE GEIGE (mit Verzögerung zwischen verstecken vorherigen Liste und zeigt 2. element)

var i = 0;
$('ul').each(function() {
    var hide_after = $(this).children().length;
    $(this).children().each(function(counter) {
        $(this)
            .delay(++i * 2000)
            .animate({left:0, opacity:1})
            .delay((hide_after - counter) * 2000)
            .animate({left:'100%', opacity: 0});
    });
});

http://jsfiddle.net/zp240znv/3/

NEUE GEIGE mit timeOuts (richtiger Weg, ohne es zu übertreiben, mit Codierung)

var base_duration = 2000;
$('ul').each(function(i) {
    var li_count = $(this).children().length,
        hide_timeout = ((i+1) * base_duration * li_count);
    $(this).children().each(function(ii) {
        var li = $(this),
            show_timeout = (i * li_count * base_duration) + (ii * base_duration);
        window.setTimeout(function() {
            li.animate({left:0, opacity:1})
        }, show_timeout);
        window.setTimeout(function() {
            li.animate({left:'100%', opacity:0})
        }, hide_timeout);
    });
});

http://jsfiddle.net/zp240znv/17/

+1 für die Bemühungen und die erste richtige Antwort.

InformationsquelleAutor wiesion

Ok hier ist der code

<ul id="first">
                <li>List 1, Line 1</li>
                <li>List 1, Line 2</li>
                <li>List 1, Line 3</li>
            </ul>
            <ul id="second">
                <li>List 2, Line 1</li>
                <li>List 2, Line 2</li>
                <li>List 2, Line 3</li>
            </ul>
            <ul id="third">
                <li>List 2, Line 1</li>
                <li>List 2, Line 2</li>
                <li>List 2, Line 3</li>
            </ul>

        <script type="text/javascript">
        $("#first").fadeIn(300,function(){
            $(this).children().each(function(i) {
               $(this).delay((i++) * 2000).animate({left:0, opacity:1});
           });

        });

        setTimeout(function(){
        second_animate();
        },5000)

        function second_animate(){
            $('#first').fadeOut(300,function(){
                $("#second").fadeIn(300,function(){
            $(this).children().each(function(i) {
               $(this).delay((i++) * 2000).animate({left:0, opacity:1});
           });

        });
            });
        }

        </script>

Überprüfen fiddle du gepostet hast, habe ich bearbeitet, dass

Bitte poste dein code hier. Link nur Antworten sind nicht die Antworten!
Können Sie code umgeschrieben, so dass es hängt nicht <ul> zählen? Auch sollten Sie die Postleitzahl als Teil der Antwort, nicht nur ein link zu hantieren.
jetzt bin ich zu spät für 2 Sekunden 🙂
ich weiß nicht, in welcher basis der user will die Antwort, die ich bearbeitet hatte seine Geige das ist es 🙂 und ich kann auch ohne ul zählen, wenn Sie darauf bestehen
Ja ich verstehe, aber, während diese Antwort ist für den Benutzer, viele andere Menschen werden es sehen und Stackoverflow Regeln vorschlagen, dass Sie haben, um den code in deine Antwort. Auch wenn es schön gemacht und gut formatiert Sie bekommen upvotes :). @Regent du bist aufholen. Vielleicht Nächstes mal wirst du der erste sein 😛

InformationsquelleAutor Shreeraj Karki

-1

$( ".first" ).animate({ "left": "+=5px" }, 500,function(){
  $( ".second" ).animate({ "left": "+=5px" }, 500,function(){
    $( ".third" ).animate({ "left": "+=5px" }, 500,function(){
      $( "#mainContainer" ).hide("slow"); //main container of all that div 
    });
  });
});

An der Stelle des linken animation können Sie Ihre und hier Haupt-container ist, die enthält, dass alle divs. hoffe dein problem ist gelöst

$('#firstulid').each(function() {
    $(this).children().each(function(i) {
        $(this).animate({left:0, opacity:1},2000, function(){
              $('#firstulid').hide("slow");
              $('#secondulid').each(function() {
              $(this).children().each(function(i) {
                  $(this).animate({left:0, opacity:1},2000, function(){
                                 $('#secondulid').hide("slow");
                                 $('#thirdulid').each(function() {
                                    $(this).children().each(function(i) {
                                        $(this).animate({left:0, opacity:1},2000, function(){

                                        });
                                    });
                                });
                  });
              });
          });
        });
    });
});

Wo hast du das gefunden .first, .second, .third und #mainContainer? Auch, wenn es 100 <ul>s - werden Sie code schreiben, der in diesem Stil?
Nein, Sie können es dynamisch ist, ist es für ein paar div ' s nur sondern ist auch eine gute Lösung und auch für Anfänger leicht
Ich denke, das ist ein schlechter Ansatz, da es nicht unendlich/unbestimmte Anzahl von Elementen. Nicht Anfängern zu denken, in einer begrenzten Weise.

InformationsquelleAutor Anup

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.