jQuery .animate / .each цепочка - PullRequest
Новая
       17

jQuery .animate / .each цепочка

0 голосов
/ 05 января 2010

Я пытаюсь объединить соответствие что-то вроде: 

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

со встроенной функцией связывания jQuery, которая заставляет анимацию ждать, пока предыдущая анимация не будет завершена, например ::

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

И затем вызвать функцию .load после завершения анимации. По сути, я хочу вывести четыре элемента по порядку [один за другим, а не все сразу], а затем загрузить четыре новых элемента в один и тот же div, заменяя первые четыре.

Как я могу сделать это многоразовым / переменным способом?

Ответы [ 5 ]

5 голосов
/ 05 января 2010

Как насчет проверки, является ли элемент последним, и затем добавления обратного вызова? 

$(".item").each(function(i, elem) {
    var callback = $(elem).is(':last') ? function() {
        //dosomething
    } : function(){};
    $(this).animate({marginLeft:"0"}, {duration: 60, complete: callback);
});
4 голосов
/ 05 января 2010

Просто укажите обратный вызов для анимации и отследите, сколько элементов было исчезло. Затем, когда все будет готово, удалите их и добавьте новые. 

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('...')
        }
    });
});
2 голосов
/ 05 января 2010 
$("#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, если javascript включен, мне нужен URL следующей страницы относительно текущей, если он выключен, то следует, что url как href и загружает новую страницу с тем же содержимым на странице, за исключением нового элементы, которые были бы $ .load-ed.

0 голосов
/ 17 апреля 2019

Мой вклад, основанный на алгоритме @ david-hellsing :) 

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

Обратите внимание, что вы можете изменить свойства ширины и высоты в соответствии со своими целями.

0 голосов
/ 14 июня 2016

Просто задержка обновления, как это: 

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