анимация нескольких divs с помощью javascript

Question

Я в настоящее время использую javascript для добавления анимации в прямоугольник, и как только анимация закончена, я устанавливаю флажок, чтобы он не отображался. Посмотрите ниже код для этого.

Javascript

$(document).ready(function() { 
    $(".filled-rectangle").stop().animate({top:'20px'}, 5000).queue(function(next){ 
    $(".filled-rectangle").css('display', 'none'); 
    }); 
}); 

Теперь я хочу добавить еще несколько коробок в контейнере, как это,

HTML

<div class="container"> 
    <div class="filled-rectangle"></div> 
</div> 

Код выше прямо сейчас работает для одного div, .filled-rectangle Я хочу добавить больше div и использовать одну и ту же анимацию для всех div.

Answer 1

Существует несколько способов. вы можете использовать вложенные callbacks, которые, по сути, позволят вам выполнить функцию после завершения другого. Поскольку вы используете класс («заполненный прямоугольник»), вы можете выбрать класс в jquery и получить массив всех элементов с прикрепленным классом. Этот массив можно использовать для использования each и отложить требуемую анимацию для каждого объекта, но в этом случае вы не можете использовать разные анимации для каждого объекта, он должен быть одинаковым.

Только посмотрите на этот пример ->https://stackoverflow.com/a/4661858/1841875

Короче:

различные анимации за другим: вложенные функции обратного вызова/очереди

же анимация на нескольких объектах за другим: каждый() с отложенная анимация

в вашем случае идут с решением каждой задержки;)