0Pricing
jQuery Academy · Lekcja

Łączenie i kolejkowanie animacji

Proszę poznać sposoby łączenia wielu metod animacji i zarządzania kolejką animacji w celu tworzenia sekwencyjnych i skoordynowanych efektów wizualnych dla dynamicznych interfejsów.

Łączenie i kolejkowanie animacji to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Wprowadzenie do łączenia animacji

Wyobraź sobie, że chcesz przesunąć element, następnie zmienić jego kolor, a na końcu go wygasić. Ręczne wykonywanie tych czynności jedna po drugiej może być trudne!

Łączenie animacji w jQuery pozwala połączyć wiele metod animacji. Każda animacja rozpoczyna się dopiero po zakończeniu poprzedniej, tworząc płynne, sekwencyjne efekty.

Podstawowa składnia łańcuchowania

Metody jQuery często zwracają sam obiekt jQuery. Dzięki temu możesz bezpośrednio wywołać kolejną metodę na otrzymanym obiekcie, tworząc „łańcuch”.

Tutaj pole przesuwa się w prawo, a następnie w dół. Spróbuj uruchomić ten kod!

<!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>

Tworzenie złożonych sekwencji

Możesz połączyć ze sobą wiele metod animacji. jQuery automatycznie umieszcza te animacje w wewnętrznej kolejce, zapewniając ich wykonanie w zdefiniowanej kolejności.

Tworzy to sekwencyjny przepływ dla elementów interfejsu. Obserwuj, jak pole się przesuwa, rośnie, a następnie wygasa!

<!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>

Jak działa kolejka animacji

Podczas łączenia metod animacji jQuery nie uruchamia ich wszystkich jednocześnie. Zamiast tego dodaje je do specjalnej listy zwanej kolejką animacji (lub kolejką „fx”).

  • Pierwsza animacja rozpoczyna się natychmiast.
  • Kolejne animacje oczekują w kolejce.
  • Po zakończeniu animacji jQuery automatycznie pobiera następną z kolejki i ją uruchamia.

Dzięki temu animacje są wykonywane sekwencyjnie i w przewidywalny sposób.

Dodawanie przerw za pomocą .delay()

Czasami potrzebujesz przerwy między animacjami. Metoda .delay() idealnie się do tego nadaje! Wstrzymuje wykonywanie kolejnych elementów kolejki animacji na określony czas.

Pole przesuwa się, zatrzymuje, a następnie znów się przesuwa.

<!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>

Uruchamianie własnego kodu w kolejce

Za pomocą .queue() możesz bezpośrednio wstawiać funkcje niebędące animacjami do kolejki. Pozwala to wykonywać działania, takie jak zmiana tekstu lub dodanie klasy, dokładnie pomiędzy animacjami.

Funkcja jest wykonywana, gdy nadejdzie jej kolej w kolejce. Pamiętaj, aby wewnątrz własnej funkcji wywołać next() i poinformować jQuery o przejściu do następnego elementu kolejki!

<!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>

Przerywanie animacji za pomocą .stop()

A co, jeśli chcesz zatrzymać animację w połowie? Z pomocą przychodzi metoda .stop(). Może zatrzymać aktualnie uruchomioną animację elementu.

  • .stop(true): Zatrzymuje bieżącą animację i czyści całą kolejkę animacji.
  • .stop(false, true): Zatrzymuje bieżącą animację i przechodzi do jej stanu końcowego, ale nie czyści kolejki.

Używaj tej metody ostrożnie, ponieważ może zakłócić starannie zaplanowane sekwencje!

<!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>

Przechodzenie do końca animacji za pomocą .finish()

Metoda .finish() pozwala natychmiast zakończyć wszystkie animacje aktualnie wykonywane na elemencie i wyczyścić jego kolejkę animacji.

  • Działa podobnie jak wywołanie .stop(true, true) dla wszystkich animacji.
  • Element natychmiast przechodzi do końcowego stanu wszystkich animacji znajdujących się w kolejce.

Przydaje się to w przypadku przycisków „resetowania” lub szybkiego przenoszenia elementu do końcowego stanu animacji.

<!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>

Łączenie różnych efektów

Łańcuchowanie nie dotyczy tylko .animate()! Możesz łączyć wiele innych metod animacji jQuery, takich jak .fadeIn(), .slideUp(), .slideToggle() i inne.

Metody te również korzystają z tej samej kolejki animacji, co pozwala z łatwością tworzyć złożone sekwencje wizualne.

<!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>

Szybkie sprawdzenie łańcuchowania

Rozważ poniższy kod jQuery. Jaki będzie końcowy stan elementu #myBox po kliknięciu przycisku?

<!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>

Podsumowanie: łańcuchowanie i kolejki

Świetnie! Nauczyłeś(-aś) się tworzyć dynamiczne, sekwencyjne efekty wizualne za pomocą łańcuchowania animacji i mechanizmu kolejek w jQuery.

  • Łańcuchowanie: Łączenie wielu metod animacji.
  • Kolejka: jQuery zarządza animacjami w określonej kolejności.
  • .delay(): Wstawianie przerw między animacjami.
  • .queue(): Wstawianie własnych funkcji do kolejki.
  • .stop(): Przerywanie animacji lub czyszczenie kolejki.
  • .finish(): Natychmiastowe kończenie wszystkich animacji w kolejce.

Następnie zajmiemy się niestandardowym easingiem i callbackami animacji, aby zapewnić jeszcze większą kontrolę!

Często zadawane pytania

Czy lekcja „Łączenie i kolejkowanie animacji” jest bezpłatna?

Tak — pełny tekst „Łączenie i kolejkowanie animacji” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Łączenie i kolejkowanie animacji”?

Proszę poznać sposoby łączenia wielu metod animacji i zarządzania kolejką animacji w celu tworzenia sekwencyjnych i skoordynowanych efektów wizualnych dla dynamicznych interfejsów. Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?

Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.

Ile czasu zajmuje lekcja „Łączenie i kolejkowanie animacji”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?

Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Łączenie i kolejkowanie animacji
  2. Niestandardowe funkcje easing i callbacki animacji
  3. Zaawansowane efekty przełączania i wysuwania
← Powrót do jQuery Academy