Lekcja 10: Efekty w jQuery - Przenikanie (`fadeIn()`, `fadeOut()`, `fadeToggle()`, `fadeTo()`)

Oprócz podstawowych efektów show()/hide()/toggle(), jQuery oferuje bardziej subtelne animacje przenikania (zmiany przezroczystości), które pozwalają na płynne pojawianie się i znikanie elementów. Te metody działają poprzez animowanie właściwości CSS opacity.

Metody Przenikania

.fadeIn([czasTrwania], [funkcjaPoZakonczeniu]): Stopniowo pokazuje ukryte elementy, animując ich przezroczystość od 0 do 1. Element musi być wcześniej ukryty (np. za pomocą display: none; lub .hide()).

// Płynne pojawienie się komunikatu po załadowaniu strony
$(function() {
  $("#wiadomosc-powitalna").fadeIn(1500); // Pokaż przez 1.5 sekundy
});

// Pokaż szczegóły po kliknięciu, z funkcją zwrotną
$(".pokaz-szczegoly").on("click", function() {
  let idProduktu = $(this).data("produkt-id");
  $("#szczegoly-" + idProduktu).fadeIn("fast", function() {
    console.log("Pokazano szczegóły produktu", idProduktu);
  });
});

.fadeOut([czasTrwania], [funkcjaPoZakonczeniu]): Stopniowo ukrywa widoczne elementy, animując ich przezroczystość od 1 do 0. Po zakończeniu animacji, jQuery dodatkowo ustawia display: none;, aby element nie zajmował miejsca.

// Ukryj powiadomienie po 5 sekundach
setTimeout(function() {
  $(".powiadomienie-flash").fadeOut(1000);
}, 5000);

// Ukryj element po kliknięciu przycisku "Zamknij"
$(".przycisk-zamknij").on("click", function() {
  $(this).closest(".modal").fadeOut("slow", function() {
    // Opcjonalnie: usuń modal z DOM po ukryciu
    // $(this).remove();
  });
});

.fadeToggle([czasTrwania], [funkcjaPoZakonczeniu]): Przełącza widoczność elementów za pomocą animacji przenikania. Jeśli element jest widoczny, zostanie ukryty (fadeOut); jeśli jest ukryty, zostanie pokazany (fadeIn).

// Przełączanie widoczności menu po kliknięciu ikony
$("#ikona-menu").on("click", function() {
  $("#menu-nawigacyjne").fadeToggle(300);
});

// Przełączanie dodatkowego opisu
$(".przycisk-opis").on("click", function() {
  $(this).next(".opis-tekst").fadeToggle("fast");
});

.fadeTo(czasTrwania, docelowaPrzezroczystosc, [funkcjaPoZakonczeniu]): Animuje przezroczystość wybranych elementów do określonej wartości (docelowaPrzezroczystosc) w podanym czasie (czasTrwania). Wartość docelowaPrzezroczystosc musi być liczbą między 0 (całkowicie przezroczysty) a 1 (całkowicie nieprzezroczysty). Ważne: W przeciwieństwie do fadeOut, fadeTo nie zmienia właściwości display elementu po zakończeniu animacji, nawet jeśli przezroczystość osiągnie 0. Element nadal będzie zajmował miejsce na stronie.

// Zmniejsz przezroczystość obrazka do 50% po najechaniu myszką
$("img.galeria").on("mouseenter", function() {
  $(this).fadeTo("fast", 0.5);
});

// Przywróć pełną nieprzezroczystość po zjechaniu myszką
$("img.galeria").on("mouseleave", function() {
  $(this).fadeTo("fast", 1.0);
});

// Ustaw przezroczystość na 0 (element nadal istnieje i zajmuje miejsce)
$("#nieaktywny-element").fadeTo(1000, 0);

// Można łączyć z innymi efektami (dzięki kolejkowaniu)
$("#element")
  .fadeTo("slow", 0.2) // Najpierw zmniejsz przezroczystość
  .slideUp(500);       // Potem zwiń (efekt slide omówiony w kolejnej lekcji)

Parametry `czasTrwania` i Funkcja Zwrotna

Parametry czasTrwania (liczba w ms, "fast", "slow") oraz opcjonalna funkcja zwrotna (callback) działają w metodach przenikania tak samo, jak w podstawowych efektach show()/hide()/toggle().

Zadanie praktyczne

Stwórz plik HTML z:

Div-em z ID "alert-box" i tekstem "Ważny komunikat!", początkowo ukrytym (style="display: none;").
Przyciskiem "Pokaż Alert".
Przyciskiem "Ukryj Alert".
Obrazkiem z ID "przyciemniany-obrazek".

Używając jQuery:

Po kliknięciu "Pokaż Alert", pokaż "alert-box" za pomocą fadeIn() z czasem 800ms.
Po kliknięciu "Ukryj Alert", ukryj "alert-box" za pomocą fadeOut() z czasem "slow".
Po najechaniu myszką na "przyciemniany-obrazek", zmień jego przezroczystość na 0.7 za pomocą fadeTo() z czasem "fast".
Po zjechaniu myszką z "przyciemniany-obrazek", przywróć jego pełną przezroczystość (1.0) za pomocą fadeTo() z czasem "fast".

Pokaż rozwiązanie

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Test Efektów Przenikania</title>
    <style>
        #alert-box {
            padding: 15px;
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            margin-bottom: 10px;
        }
        #przyciemniany-obrazek {
            margin-top: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="pokaz-alert">Pokaż Alert</button>
    <button id="ukryj-alert">Ukryj Alert</button>

    <div id="alert-box" style="display: none;">
        Ważny komunikat!
    </div>

    <img id="przyciemniany-obrazek" src="https://via.placeholder.com/200" alt="Obrazek">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function() {
            // 1. Pokazywanie alertu
            $("#pokaz-alert").on("click", function() {
                $("#alert-box").fadeIn(800);
            });

            // 2. Ukrywanie alertu
            $("#ukryj-alert").on("click", function() {
                $("#alert-box").fadeOut("slow");
            });

            // 3. Przyciemnianie obrazka po najechaniu
            $("#przyciemniany-obrazek").on("mouseenter", function() {
                $(this).fadeTo("fast", 0.7);
            });

            // 4. Rozjaśnianie obrazka po zjechaniu
            $("#przyciemniany-obrazek").on("mouseleave", function() {
                $(this).fadeTo("fast", 1.0);
            });
        });
    </script>
</body>
</html>

Zadanie do samodzielnego wykonania

Stwórz przycisk "Przełącz Panel" i div z ID "panel" zawierający jakiś tekst, początkowo widoczny.

Używając jQuery:

Po kliknięciu przycisku "Przełącz Panel", przełączaj widoczność diva "panel" za pomocą fadeToggle() z czasem 600ms.
Dodaj funkcję zwrotną do fadeToggle(), która wyświetli w konsoli "Panel pokazany" lub "Panel ukryty" w zależności od aktualnego stanu panelu po zakończeniu animacji. (Wskazówka: możesz sprawdzić widoczność elementu wewnątrz callbacku za pomocą $(this).is(":visible")).

FAQ - Efekty Przenikania jQuery

Jaka jest różnica między `fadeOut()` a `fadeTo(czas, 0)`?

Obie metody animują przezroczystość do 0. Jednak fadeOut() po zakończeniu animacji dodatkowo ustawia elementowi styl display: none;, co sprawia, że element znika z układu strony i nie zajmuje miejsca. fadeTo(czas, 0) tylko zmienia przezroczystość – element staje się niewidoczny, ale nadal istnieje w DOM i zajmuje swoje miejsce.

Czy mogę użyć `fadeIn()` na elemencie, który jest już widoczny?

Podobnie jak w przypadku show(), jeśli element jest już widoczny (nie ma display: none;), wywołanie fadeIn() nie będzie miało żadnego efektu – animacja nie zostanie uruchomiona, a funkcja zwrotna nie zostanie wykonana.

Czy efekty przenikania działają na elementach z `visibility: hidden`?

Nie bezpośrednio. Metody fadeIn()/fadeOut()/fadeToggle() operują na właściwości display i opacity. Jeśli element ma visibility: hidden, samo fadeIn() nie wystarczy. Trzeba by najpierw zmienić visibility na visible (np. za pomocą .css()), a potem ewentualnie animować opacity za pomocą fadeTo().

Czy mogę animować przenikanie i rozmiar jednocześnie?

Metody fadeIn()/fadeOut()/fadeToggle() animują tylko przezroczystość (oraz display). Metody show()/hide()/toggle() animują przezroczystość, szerokość i wysokość. Jeśli potrzebujesz bardziej złożonej, niestandardowej animacji wielu właściwości CSS jednocześnie, powinieneś użyć metody .animate(), która zostanie omówiona w późniejszych lekcjach.

Jak sprawdzić, czy element jest aktualnie animowany?

Można użyć selektora :animated. Na przykład $("#mojDiv:animated") zwróci obiekt jQuery zawierający #mojDiv tylko wtedy, gdy jest on w trakcie animacji. Można to wykorzystać np. w warunku if ($("#mojDiv").is(":animated")) { ... }.

Lekcja 10: Efekty w jQuery - Przenikanie (fadeIn(), fadeOut(), fadeToggle(), fadeTo())