مسج .تحريك/.كل تسلسل

Question

أحاول الجمع بين مطابقة شيئا مثل:

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

مع مسج الكامنة في تسلسل الوظائف قوات الحركة إلى الانتظار حتى الرسوم المتحركة السابقة قد أنجزت ، على سبيل المثال:

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

ثم الزناد .تحميل وظيفة بعد الرسوم المتحركة قد أكملت.في الأساس أريد أن تتلاشى أربعة بنود في النظام [واحد بعد المقبل ، ليس في كل مرة] ، ثم حمل أربعة عناصر جديدة في نفس div استبدال الأربعة الأولى.

كيف يمكنني أن أفعل هذا في القابل لإعادة الاستخدام/متغير الطريقة ؟

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 مقابض جديدة واحدا تلو الآخر تتلاشى في مكان آخر ، ولكن هذا هو ما كنت أبحث عنه أكثر أو أقل قليلا من رمز إضافية حول أنه ربما تسلط بعض الضوء على ما كان يحدث (هناك بجانب السهم مع عنوان url في href إذا جافا سكريبت ، أحتاج إلى رابط الصفحة التالية النسبي الحالي ، إذا كان حالا ، ويترتب على هذا العنوان كما href والأحمال صفحة جديدة التي لديها نفس المحتوى على الصفحة باستثناء العناصر الجديدة التي كانت $.تحميل-ed.

Answer 2

ماذا عن التحقق إذا كان العنصر هو آخر واحد ثم إضافة رد اتصال؟

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

Answer 3

فقط حدد رد اتصال الرسوم المتحركة وتتبع عدد العناصر التي تم تلاشيها. ثم، عند القيام به جميعا، قم بإزالتها وإضافة تلك الجديدة.

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

مجرد تحديث التأخير مثل هذا:

$(".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

مساهمتي، بناء على @ ديفيد الجيلينج خوارزمية :)

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

لاحظ أنه يمكنك تغيير خصائص العرض والارتفاع لغرضك الخاص.