jQuery .animate / .each Verkettungs

Question

Ich versuche, etwas zu kombinieren, passend wie:

$(".item").each(function(i) {
    //animation here
});

mit inhärenter Verkettungs Funktionalität jQuery, das die Animation zwingt, zu warten, bis die vorherige Animation abgeschlossen ist, z.

$(".item").each(function(i) {
    $(this).animate({marginLeft:"0"}, 60);
});

Und dann eine .load Funktion auslösen, nachdem die Animationen abgeschlossen haben. Grundsätzlich mag ich vier Punkte aus, um verblassen [einen nach dem anderen, nicht alle auf einmal], dann vier neue Objekte in die gleiche div laden, die ersten vier zu ersetzen.

Wie kann ich das in einem wieder verwendbaren / variabel?

Answer 1

$("#more:not(.disabled)").live("click", function(event) {
    event.preventDefault();

    var urlPieces = (event.target.href).split("/");
    var nextURL = urlPieces[urlPieces.length - 2] + "/" + urlPieces[urlPieces.length - 1];
    var items = $(".item");
    var itemCount = items.length;   

    items.each(function(i) {
        var passthru = this;
        window.setTimeout(function() {
            $(passthru).animate({opacity:"0"}, 60, function() {
                if (i == itemCount - 1) {
                    $("#browse").load(nextURL + " .item, #controls", fadeInNew);
                }
            });
        }, 60*i);
    });
});

fadeInNew nimmt die neuen von einer Fade-in an anderer Stelle, aber das war, was ich für mehr oder weniger mit einem wenig zusätzlichen Code um es zu betrachten vielleicht auf etwas Licht zu vergießen, was los war (es gibt einen nächsten Pfeil mit einer URL wenn Javascript in seiner href, ist, dass ich die URL der nächsten Seite relativ zum aktuellen brauche, wenn er ausgeschaltet ist, folgt daraus, dass url als href und lädt eine neue Seite, die den gleichen Inhalt auf der Seite mit Ausnahme der neuen hat Gegenstände, die $ .load-ed.

hätte

Answer 2

Wie wäre es überprüft, ob das Element ist das letzte und dann einen Rückruf hinzufügen?

$(".item").each(function(i, elem) {
    var callback = $(elem).is(':last') ? function() {
        //dosomething
    } : function(){};
    $(this).animate({marginLeft:"0"}, {duration: 60, complete: callback);
});

Answer 3

Nur einen Rückruf für die Animationen festlegen und verfolgen, wie viele Elemente ausgeblendet worden ist. Dann, wenn sie fertig sind, sie entfernen und die neuen hinzufügen.

var items = $('.item');
var parent = items.parent();
var itemCount = items.length;
items.each(function()
{
    $(this).fadeOut('medium', function()
    {
        itemCount--;
        if (itemCount == 0)
        {
            // Remove the items and add the new ones.
            items.remove();
            parent.append('...')
        }
    });
});

Answer 4

Just Update Verzögerung wie folgt aus:

$(".item").each(function(i) {
    $(this).delay(200*i).animate({marginLeft:"0"}, 60);
});

ul li.item {
  margin-left: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item">List 1</li>
  <li class="item">List 2</li>
  <li class="item">List 3</li>
  <li class="item">List 4</li>
  <li class="item">List 5</li>
  <li class="item">List 6</li>
</ul>

Answer 5

Mein Beitrag, basierend auf @ david-hellsing Algorithmus:)

function pop_in(array_elem, index) {
    $(array_elem[index]).animate({
        width: 'toggle',
        height: 'toggle'
    }, 700)// callback will be a promise
    .promise()
    .then(() => {
        $(array_elem[index]).css({visibility: 'hidden'}); //hide after reduce size

        if(index > 0)
            pop_in(array_elem, --index) //recursive call
        else
            console.log("Animation finished. Execute another function from here.");
    });
}
const items_menu = $(".item");
pop_in(items_menu, items_menu.length-1); //start from last to first element

Hinweis, die können Sie Breite und Höhe Eigenschaften zu Ihrem eigenen Zweck ändern.