Lekcja 12: Efekty w jQuery - Niestandardowe Animacje (`.animate()`)

Podczas gdy wbudowane efekty jak fadeIn, slideDown czy hide są bardzo użyteczne, czasami potrzebujemy stworzyć bardziej złożone lub niestandardowe animacje, które modyfikują wiele właściwości CSS jednocześnie. Do tego celu służy potężna metoda .animate().

Metoda `.animate()`

Metoda .animate() pozwala na tworzenie niestandardowych animacji poprzez stopniową zmianę wartości liczbowych właściwości CSS.

Podstawowa składnia:

$(selektor).animate(wlasciwosci, [czasTrwania], [easing], [funkcjaPoZakonczeniu]);

wlasciwosci (wymagane): Obiekt JavaScript zawierający pary klucz-wartość, gdzie klucze to nazwy właściwości CSS do animowania (w notacji camelCase, np. marginLeft, fontSize), a wartości to docelowe wartości liczbowe tych właściwości. Można również używać stringów 'show', 'hide', 'toggle' dla właściwości, które wpływają na widoczność (np. height, width, opacity).
```
// Przykład obiektu właściwości
{
  opacity: 0.5,       // Zmień przezroczystość na 50%
  marginLeft: "50px", // Przesuń w prawo o 50 pikseli
  height: "toggle"    // Przełącz wysokość (animuj do 0 lub do pełnej)
}
```
czasTrwania (opcjonalne): Czas trwania animacji w milisekundach (liczba) lub string "fast" (200ms) / "slow" (600ms). Domyślnie 400ms.
easing (opcjonalne): String określający funkcję "łagodzenia" (przebiegu) animacji. Domyślnie jest to "swing" (animacja lekko zwalnia pod koniec). Drugą wbudowaną opcją jest "linear" (stała prędkość animacji). Można używać dodatkowych funkcji easing, jeśli dołączymy bibliotekę jQuery UI lub inną wtyczkę easing.
funkcjaPoZakonczeniu (opcjonalne): Funkcja zwrotna (callback) wykonywana po zakończeniu animacji dla każdego animowanego elementu.

Przykład Użycia `.animate()`

// Animuj div po kliknięciu przycisku
$("#przycisk-animuj").on("click", function() {
  $("#box-do-animacji").animate({
    // Właściwości do animowania
    width: "300px",       // Zwiększ szerokość
    height: "300px",      // Zwiększ wysokość
    opacity: 0.8,         // Zmniejsz przezroczystość
    marginLeft: "+=50px", // Przesuń w prawo o dodatkowe 50px (wartość względna)
    fontSize: "24px"      // Zwiększ rozmiar czcionki
  }, 
  1500, // Czas trwania: 1.5 sekundy
  "linear", // Easing: liniowy
  function() { // Funkcja zwrotna
    console.log("Animacja zakończona!");
    $(this).css("border", "2px solid red"); // Zmień obramowanie po animacji
  });
});

Wartości Względne

Można animować właściwości, używając wartości względnych += lub -=. Na przykład marginLeft: "+=50px" zwiększy lewy margines o 50 pikseli względem jego aktualnej wartości.

Animowanie Kolorów

Domyślnie jQuery nie animuje właściwości związanych z kolorami (np. backgroundColor, color). Aby animować kolory, należy dołączyć bibliotekę jQuery UI lub specjalną wtyczkę do animacji kolorów.

Kolejkowanie Animacji

Metoda .animate(), podobnie jak inne metody efektów, jest automatycznie kolejkowana. Wywołanie kilku .animate() na tym samym elemencie spowoduje ich sekwencyjne wykonanie.

$("#element")
  .animate({ left: "100px" }, "slow") // Najpierw przesuń w prawo
  .animate({ top: "50px" }, "slow")  // Potem przesuń w dół
  .animate({ opacity: 0.5 }, "fast"); // Na koniec zmień przezroczystość

Zadanie praktyczne

Stwórz plik HTML z div-em o ID "animowany-kwadrat", ustawionym początkowo na width: 100px; height: 100px; background-color: blue; position: relative;. Dodaj przycisk "Start Animacji".

Używając jQuery i metody .animate():

Po kliknięciu przycisku "Start Animacji":
Animuj kwadrat, aby jego szerokość i wysokość zmieniły się na 200px.
Jednocześnie przesuń go w prawo o 100px (zmień left).
Ustaw czas trwania tej animacji na 1 sekundę.
Po zakończeniu pierwszej animacji, natychmiast rozpocznij drugą animację, która:
Zmniejszy szerokość i wysokość kwadratu z powrotem do 50px.
Zmieni jego przezroczystość na 0.3.
Przesunie go w dół o 50px (zmień top).
Ustaw czas trwania drugiej animacji na "fast".

Pokaż rozwiązanie

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Test .animate()</title>
    <style>
        #animowany-kwadrat {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative; /* Ważne dla animacji left/top */
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <button id="start-animacji">Start Animacji</button>
    <div id="animowany-kwadrat"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function() {
            $("#start-animacji").on("click", function() {
                $("#animowany-kwadrat")
                    // Pierwsza animacja
                    .animate({
                        width: "200px",
                        height: "200px",
                        left: "100px"
                    }, 1000) // Czas trwania 1s
                    // Druga animacja (wykona się po pierwszej)
                    .animate({
                        width: "50px",
                        height: "50px",
                        opacity: 0.3,
                        top: "50px"
                    }, "fast"); // Czas trwania "fast"
            });
        });
    </script>
</body>
</html>

Zadanie do samodzielnego wykonania

Stwórz div z ID "pasek-postepu" o wysokości 20px, szerokości 0px i niebieskim tle. Dodaj przycisk "Wypełnij Pasek".

Używając jQuery:

Po kliknięciu przycisku "Wypełnij Pasek", animuj szerokość diva "pasek-postepu" do 100% (np. "100%").
Ustaw czas trwania animacji na 3 sekundy (3000ms).
Użyj liniowego easingu ("linear").
Po zakończeniu animacji, wyświetl w konsoli komunikat "Pasek wypełniony!".

FAQ - Niestandardowe Animacje jQuery (`.animate()`)

Jakie właściwości CSS mogę animować za pomocą `.animate()`?

Możesz animować dowolne właściwości CSS, które przyjmują wartości liczbowe. Obejmuje to wymiary (width, height), pozycjonowanie (top, left, margin, padding), przezroczystość (opacity) oraz rozmiar czcionki (fontSize). Właściwości kolorów wymagają dodatkowych wtyczek.

Czy mogę zatrzymać animację stworzoną przez `.animate()`?

Tak, metoda .stop() działa również na animacje stworzone za pomocą .animate(). Wywołanie $(selektor).stop() zatrzyma bieżącą animację w kolejce dla danego elementu.

Co oznacza 'easing' w kontekście animacji?

Easing (funkcja łagodzenia) określa tempo zmian wartości podczas animacji. "linear" oznacza stałą prędkość, podczas gdy "swing" (domyślny) powoduje, że animacja zaczyna i kończy się nieco wolniej niż w środku, co często wygląda bardziej naturalnie.

Czy mogę animować właściwości nie-liczbowe, np. `display`?

Nie bezpośrednio. .animate() działa tylko na wartościach liczbowych. Do zmiany właściwości nieliczbowych (jak display, position, float) używa się metody .css(). Można jednak użyć stringów 'show', 'hide', 'toggle' jako wartości dla właściwości takich jak width, height, opacity w .animate(), co spowoduje animację tych właściwości i odpowiednią zmianę display na końcu.

Jak animować przewijanie strony (scroll)?

Można animować właściwość scrollTop elementu html i body. Przykład płynnego przewinięcia do góry strony: $('html, body').animate({ scrollTop: 0 }, 'slow');. Wymaga to często uwzględnienia obu selektorów (html, body) dla kompatybilności z różnymi przeglądarkami.

Lekcja 12: Efekty w jQuery - Niestandardowe Animacje (.animate())

Metoda .animate()

Przykład Użycia .animate()