Дождитесь завершения анимации в цикле

Я хотел бы анимировать несколько объектов с помощью цикла for. код выглядит так:

for (var i = 0; i < 5; i++) {
    $('.el-' + i).animate({
        // code
    }, 5000);
}

как я могу заставить цикл ждать завершения анимации? это возможно? только один элемент должен быть анимирован за раз.

четвертый параметр функции .animate - это ее обратный вызов полный. Вы можете использовать это для поэтапного запуска анимации, хотя вам придется немного переписать код. Имейте в виду, что это асинхронно.

— 30.03.2021 20:38

javascript jquery

30.03.2021 20:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Как упоминалось @AlainDoe, вы можете использовать полный обратный вызов для запуска следующей анимации, примерно так.

const animateFunc = (i) => {
  $(".el-" + i).animate({ // code }, 5000, "swing", () => {
    if (i < 5) {
      animateFunc(i + 1);
    }
  });
};

// start the first animation
animateFunc(0);

30.03.2021 20:45

Используйте обратный вызов как рекурсивную функцию.

const count = 5;
function oneAtATime(i) {
    $('.el-'+ i).animate({
        opacity: 'toggle'
    }, 1000, ()=>{if (i < count) oneAtATime(i+1)});
}
oneAtATime(0);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "el-0">Zero</div>
<div class = "el-1">One</div>
<div class = "el-2">Two</div>
<div class = "el-3">Three</div>
<div class = "el-4">Four</div>

30.03.2021 20:49

Другие вопросы по теме

Слайдер jquery slick.js и фильтрация на основе атрибутов данных

Нужен ли jQuery-MD5 для работы jquery?

Как получить уникальный идентификатор кнопки из цикла while? (PHP)

Скольжение в меню (в теме wordpress) с помощью jQuery с CSS-анимацией

Получить данные и отсортировать их без обновления / перезагрузки страницы с помощью ajax / datatables

Динамическое обновление CSS происходит слишком часто

Как изменить идентификатор переключателя, чтобы изменить класс css "до"? Использование Unicode

После изменения содержимого на кнопку кнопка доза не работает JQuery

Как изменить стрелку сортировки по возрастанию и убыванию с помощью jquery ajax

Вложенные теги с помощью JQuery

Дождитесь завершения анимации в цикле

Ответы 2

Другие вопросы по теме

Похожие вопросы