JQuery последовательная анимация

Question

Я пытаюсь воспроизвести эту анимацию

http://tympanus.net/Tutorials/AnimatedContentMenu/

Я не могу анимировать элементы меню, чем последовательно скользить вверх

    $('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each( function() {
                $(this).animate(
                    {top:'0px'},
                    {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
                }); 
        });
    }
});

Таким образом, пункты меню анимируются одновременно ..... что не так?

Answer 1

Поскольку очередь составляет на элемент , здесь на самом деле ничего не стоит в очереди, поэтому все они анимируются одновременно.Хотя есть несколько способов сделать это.Один простой способ сделать это с небольшим количеством предметов - это .delay(), например:

$('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each(function(i) {
            $(this).delay(i*200).animate(
                {top:'0px'},
                {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
            }); 
        });
    }
});

Вы можете проверить демо здесь .

Это задерживает анимацию на 200 мс * индекс элемента в итерации .each(), поэтому первая анимация происходит мгновенно, вторая - через 200 мс, а затем следующие 200 мс.и т. д. Причина, по которой я рекомендую это, заключается в том, что у вас нет , чтобы использовать 200 мс для задержки, вы можете использовать меньшее число и анимации немного перекрываются, что, по-видимому, является эффектом, который вы используете.after.

Другой способ сделать это (более подробный, только последовательный и не допускающий перекрытия) - использовать .queue() для создания собственного, например:

$('#bar').animate(
    {width: '100%'},
    {duration: 500,
    specialEasing: {width: 'linear'},
    complete: function() {
        $('li').each(function() {
            $(document).queue(function(n) {
              $(this).animate(
                {top:'0px'},
                {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'},
                complete: n //call the next item in the queue             
              }); 
            });
        });
    }
});

Вы можете проверить эту версию здесь .

Answer 2

Вы можете использовать массив для содержания элементов:

var Menus = ['menu_1', 'menu_2', 'menu_3', 'menu _4', 'menu _5'];

Затем вы определяете цикл for для элементов, увеличивая значение (250 мс) в каждом цикле цикла:

function myFn(time){
    for(var i = 0; i < Menus.length; i++){
      $('#' + Menus[i]).animate({'opacity' : 1}, time, 'easeInOutQuad');
      time = ++time + 250;
    };
  };

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

myFn(500);

Answer 3

Это то, что я использовал для последовательной анимации:

for (var i = 1; i < 10; i++) {
    $('#bullet-' + i).delay(i * 1000 - 1000).fadeIn('fast', function () {
        var id = this
        setTimeout (function () {$(id).css('color', 'lightgray');}, 1500);
    });
}

Answer 4

Очередь уникальна для каждого элемента, что означает, что каждый элемент имеет свою собственную независимую очередь.Используйте обратный вызов после завершения анимации для каждого элемента.Пример: если у вас есть пять тегов li, используйте определенный класс для первых четырех из них и добавьте обратный вызов к анимации этого класса, чтобы выполнить анимацию следующего элемента.