0Pricing
jQuery Academy · Урок

Цепочки и очереди анимаций

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

«Цепочки и очереди анимаций» — бесплатный урок jQuery Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

Введение в объединение анимаций

Представьте, что Вам нужно, чтобы элемент переместился, затем изменил цвет, а потом исчез. Выполнить всё это вручную одно за другим может быть непросто!

Объединение анимаций в jQuery позволяет связывать несколько методов анимации. Каждая анимация начинается только после завершения предыдущей, создавая плавные последовательные эффекты.

Основной синтаксис объединения

Методы jQuery часто возвращают сам объект jQuery. Это позволяет сразу вызвать другой метод для результата, формируя «цепочку».

Здесь блок перемещается вправо, а затем вниз. Попробуйте запустить код!

<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 1000) // Move right
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

Создание сложных последовательностей

Можно связать множество методов анимации. jQuery автоматически помещает эти анимации во внутреннюю очередь, обеспечивая их выполнение в заданном Вами порядке.

Так создаётся последовательный поток действий для элементов интерфейса. Наблюдайте, как блок перемещается, затем увеличивается и исчезает!

<!DOCTYPE html>
<html>
<head>
<title>Complex Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .animate({height: '100px', width: '100px'}, 600)
          .animate({opacity: 0.5}, 500)
          .animate({top: '100px'}, 700)
          .fadeOut(500); // Fades out completely
      });
    });
  </script>
</body>
</html>

Как работает очередь анимаций

При объединении методов анимации jQuery не запускает их одновременно. Вместо этого он добавляет их в специальный список, называемый очередью анимаций (или очередью «fx»).

  • Первая анимация запускается сразу.
  • Последующие анимации ожидают в очереди.
  • После завершения анимации jQuery автоматически извлекает из очереди следующую и запускает её.

Это обеспечивает последовательное и предсказуемое выполнение анимаций.

Добавление пауз с помощью .delay()

Иногда между анимациями нужна пауза. Для этого отлично подходит метод .delay()! Он приостанавливает выполнение следующих элементов очереди анимаций на заданный промежуток времени.

Блок перемещается, останавливается, а затем снова перемещается.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Delay</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: purple;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Animation</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800) // Move right
          .delay(1000) // Pause for 1 second
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

Запуск пользовательского кода в очереди

С помощью .queue() можно напрямую добавлять в очередь функции, не являющиеся анимациями. Это позволяет выполнять действия, например изменять текст или добавлять класс, точно между анимациями.

Функция выполняется, когда до неё доходит очередь. Не забудьте вызвать next() внутри пользовательской функции, чтобы сообщить jQuery перейти к следующему элементу очереди!

<!DOCTYPE html>
<html>
<head>
<title>Custom Queue Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: orange;
    position: relative;
    left: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <p id="status">Ready</p>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .queue(function(next) { // Add custom function to queue
            $(this).css("background-color", "blue");
            $("#status").text("Color changed!");
            next(); // Crucial: tells jQuery to proceed
          })
          .animate({top: '50px'}, 800)
          .queue(function(next) {
            $("#status").text("Animation done!");
            next();
          });
      });
    });
  </script>
</body>
</html>

Прерывание анимаций с помощью .stop()

Что делать, если нужно остановить анимацию на середине? Вам поможет метод .stop(). Он может остановить текущую анимацию элемента.

  • .stop(true): останавливает текущую анимацию и очищает всю очередь анимаций.
  • .stop(false, true): останавливает текущую анимацию и переводит её в конечное состояние, но не очищает очередь.

Используйте этот метод осторожно: он может нарушить тщательно спланированную последовательность!

<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: teal;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start</button>
  <button id="stopAnimation">Stop (clear queue)</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 2000)
          .animate({top: '100px'}, 2000)
          .animate({left: '0px'}, 2000);
      });

      $("#stopAnimation").on("click", function() {
        $("#myBox").stop(true, false); // Stop current, clear queue, don't jump to end
      });
    });
  </script>
</body>
</html>

Переход к концу анимации с помощью .finish()

Метод .finish() позволяет немедленно завершить все текущие анимации элемента и очистить его очередь анимаций.

  • Это похоже на вызов .stop(true, true) для всех анимаций.
  • Элемент мгновенно переходит в конечное состояние всех анимаций, находящихся в очереди.

Это полезно для кнопок «сбросить» или для быстрого перевода элемента в конечное состояние анимации.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Finish</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: darkblue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Long Chain</button>
  <button id="finishAnimation">Finish All</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 3000)
          .animate({top: '100px'}, 3000)
          .animate({width: '100px'}, 3000);
      });

      $("#finishAnimation").on("click", function() {
        $("#myBox").finish(); // Instantly jump to final state
      });
    });
  </script>
</body>
</html>

Объединение различных эффектов

Объединение подходит не только для .animate()! Можно связывать и многие другие методы анимации jQuery, например .fadeIn(), .slideUp(), .slideToggle() и другие.

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

<!DOCTYPE html>
<html>
<head>
<title>Mixed Animation Chain</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 80px;
    height: 80px;
    background-color: #3498db;
    margin-bottom: 10px;
    display: none; /* Start hidden */
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Mixed Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .fadeIn(500) // Fade in
          .delay(500) // Pause
          .slideUp(500) // Slide up
          .delay(500) // Pause
          .slideDown(500) // Slide down
          .animate({width: '120px', height: '120px'}, 700); // Grow
      });
    });
  </script>
</body>
</html>

Быстрая проверка цепочек

Рассмотрите следующий код jQuery. Каким будет конечное состояние #myBox после щелчка по кнопке?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #myBox {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    opacity: 1;
  }
</style>
</head>
<body>
  <div id="myBox"></div>
  <button id="btn">Click Me</button>
  <script>
    $(document).ready(function() {
      $("#btn").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 500)
          .delay(500)
          .animate({opacity: 0.5}, 500)
          .hide(500);
      });
    });
  </script>
</body>
</html>

Повторение: цепочки и очереди

Отличная работа! Вы научились создавать динамические последовательные визуальные эффекты с помощью объединения анимаций и механизма очередей jQuery.

  • Объединение: связывание нескольких методов анимации.
  • Очередь: jQuery управляет анимациями как последовательностью.
  • .delay(): пауза между анимациями.
  • .queue(): добавление пользовательских функций в очередь.
  • .stop(): прерывание или очистка очереди.
  • .finish(): мгновенное завершение всех анимаций в очереди.

Далее мы рассмотрим пользовательские функции плавности и обратные вызовы анимации, чтобы обеспечить ещё более точный контроль!

Часто задаваемые вопросы

Урок «Цепочки и очереди анимаций» бесплатный?

Да — полный текст урока «Цепочки и очереди анимаций» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Цепочки и очереди анимаций»?

Изучите, как объединять несколько методов анимации в цепочки и управлять очередью анимаций для создания последовательных и согласованных визуальных эффектов в динамических интерфейсах. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.

Сколько времени занимает урок «Цепочки и очереди анимаций»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Цепочки и очереди анимаций
  2. Пользовательские функции плавности и обратные вызовы анимации
  3. Расширенные эффекты переключения и скольжения
← Назад к jQuery Academy