Lekcja 11: Efekty w jQuery - Rozwijanie/Zwijanie (`slideDown()`, `slideUp()`, `slideToggle()`)

Kolejną grupą popularnych efektów w jQuery są animacje rozwijania i zwijania elementów, realizowane poprzez zmianę ich wysokości. Metody slideDown(), slideUp() i slideToggle() pozwalają na płynne pokazywanie i ukrywanie treści, co jest często wykorzystywane w elementach takich jak rozwijane menu, sekcje FAQ czy panele akordeonowe.

Metody Rozwijania/Zwijania

.slideDown([czasTrwania], [funkcjaPoZakonczeniu]): Stopniowo pokazuje ukryte elementy, animując ich wysokość od 0 do pełnej wysokości. Element musi być wcześniej ukryty (np. za pomocą display: none;, .hide() lub .slideUp()).

// Rozwiń ukryte menu po kliknięciu przycisku
$("#przycisk-menu").on("click", function() {
  $("#podmenu").slideDown(400); // Rozwiń w 400ms
});

// Pokaż szczegółowy opis produktu
$(".pokaz-opis").on("click", function() {
  $(this).siblings(".pelny-opis").slideDown("slow", function() {
    console.log("Pełny opis został rozwinięty.");
  });
});

.slideUp([czasTrwania], [funkcjaPoZakonczeniu]): Stopniowo ukrywa widoczne elementy, animując ich wysokość od pełnej wysokości do 0. Po zakończeniu animacji, jQuery dodatkowo ustawia display: none;.

// Zwiń menu po kliknięciu poza nim
$(document).on("click", function(event) {
  // Sprawdź, czy kliknięcie było poza menu i przyciskiem
  if (!$(event.target).closest("#podmenu, #przycisk-menu").length) {
    $("#podmenu").slideUp("fast");
  }
});

// Ukryj komunikat po kliknięciu przycisku "OK"
$("#komunikat .przycisk-ok").on("click", function() {
  $("#komunikat").slideUp(500, function() {
    $(this).remove(); // Usuń komunikat z DOM po zwinięciu
  });
});

.slideToggle([czasTrwania], [funkcjaPoZakonczeniu]): Przełącza widoczność elementów za pomocą animacji rozwijania/zwijania. Jeśli element jest widoczny, zostanie zwinięty (slideUp); jeśli jest ukryty, zostanie rozwinięty (slideDown).

// Klasyczny przykład akordeonu/FAQ
$(".pytanie-faq").on("click", function() {
  // Znajdź odpowiedź powiązaną z klikniętym pytaniem i przełącz jej widoczność
  $(this).next(".odpowiedz-faq").slideToggle(300);
});

// Przełączanie panelu filtra
$("#przycisk-filtruj").on("click", function() {
  $("#panel-filtrow").slideToggle("fast");
});

Parametry `czasTrwania` i Funkcja Zwrotna

Podobnie jak w przypadku innych metod efektów, czasTrwania może być liczbą milisekund, stringiem "fast" lub "slow". Opcjonalna funkcja zwrotna jest wykonywana po zakończeniu animacji dla każdego elementu.

Łączenie Efektów

Efekty rozwijania/zwijania również mogą być łączone w kolejce z innymi efektami jQuery.

$("#nowy-element")
  .hide()          // Upewnij się, że jest ukryty na starcie
  .slideDown(1000) // Rozwiń go przez 1s
  .delay(2000)     // Poczekaj 2s (metoda .delay() wstrzymuje kolejkę efektów)
  .fadeOut(500);   // Na koniec zastosuj efekt przenikania

Zadanie praktyczne

Stwórz prostą strukturę FAQ w HTML:

<div class="faq-item">
    <h3 class="pytanie">Pytanie 1?</h3>
    <div class="odpowiedz" style="display: none;">Odpowiedź na pytanie 1.</div>
</div>
<div class="faq-item">
    <h3 class="pytanie">Pytanie 2?</h3>
    <div class="odpowiedz" style="display: none;">Odpowiedź na pytanie 2.</div>
</div>
<!-- Dodaj więcej pytań i odpowiedzi -->

Używając jQuery:

Dodaj handler zdarzenia "click" do elementów z klasą .pytanie.
Wewnątrz handlera, użyj slideToggle(), aby przełączać widoczność następnego elementu (odpowiedzi) po klikniętym pytaniu. Ustaw czas animacji na 400ms.
(Opcjonalnie) Zmodyfikuj kod tak, aby po kliknięciu pytania, inne otwarte odpowiedzi były automatycznie zwijane (slideUp), tworząc efekt akordeonu, gdzie tylko jedna odpowiedź jest widoczna naraz.

Pokaż rozwiązanie

HTML (przykład z 3 pytaniami):

<!DOCTYPE html>
<html>
<head>
    <title>Test Efektów Slide</title>
    <style>
        .pytanie {
            cursor: pointer;
            background-color: #eee;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
        }
        .odpowiedz {
            padding: 10px;
            border: 1px solid #ccc;
            border-top: none;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <h2>FAQ</h2>
    <div class="faq-item">
        <h3 class="pytanie">Pytanie 1: Co to jest jQuery?</h3>
        <div class="odpowiedz" style="display: none;">jQuery to popularna biblioteka JavaScript, która upraszcza manipulację DOM, obsługę zdarzeń, animacje i zapytania AJAX.</div>
    </div>
    <div class="faq-item">
        <h3 class="pytanie">Pytanie 2: Jak działa slideToggle()?</h3>
        <div class="odpowiedz" style="display: none;">Animuje wysokość elementu od 0 do pełnej lub odwrotnie, aby go pokazać lub ukryć.</div>
    </div>
    <div class="faq-item">
        <h3 class="pytanie">Pytanie 3: Czy potrzebuję jQuery?</h3>
        <div class="odpowiedz" style="display: none;">Współczesny JavaScript (ES6+) oferuje wiele funkcji, które kiedyś wymagały jQuery, ale biblioteka ta nadal jest użyteczna i popularna, zwłaszcza w starszych projektach lub dla szybkiego prototypowania.</div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function() {
            // Wersja podstawowa (przełączanie klikniętej odpowiedzi)
            /*
            $(".pytanie").on("click", function() {
                $(this).next(".odpowiedz").slideToggle(400);
            });
            */

            // Wersja z akordeonem (zamykanie innych odpowiedzi)
            $(".pytanie").on("click", function() {
                let kliknietaOdpowiedz = $(this).next(".odpowiedz");

                // Zamknij wszystkie odpowiedzi OPRÓCZ tej, która ma być przełączona
                $(".odpowiedz").not(kliknietaOdpowiedz).slideUp(400);

                // Przełącz widoczność klikniętej odpowiedzi
                kliknietaOdpowiedz.slideToggle(400);
            });
        });
    </script>
</body>
</html>

Zadanie do samodzielnego wykonania

Stwórz przycisk "Pokaż Panel" i div z ID "panel-boczny", który jest początkowo ukryty i ma ustawioną szerokość (np. width: 200px;) oraz jakieś tło. Dodaj wewnątrz panelu przycisk "Ukryj Panel".

Używając jQuery:

Po kliknięciu "Pokaż Panel", rozwiń "panel-boczny" za pomocą slideDown() z czasem "slow".
Po kliknięciu przycisku "Ukryj Panel" (wewnątrz panelu), zwiń "panel-boczny" za pomocą slideUp() z czasem "fast".

FAQ - Efekty Rozwijania/Zwijania jQuery

Jak działa animacja w `slideUp()`/`slideDown()`?

Te metody animują głównie właściwość CSS height elementu od zera do jego naturalnej wysokości (lub odwrotnie). jQuery może również animować padding-top, padding-bottom, margin-top i margin-bottom, aby uzyskać płynniejszy efekt. Po zakończeniu slideUp(), ustawiane jest display: none;.

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

Nie, podobnie jak show() i fadeIn(), jeśli element jest już widoczny, slideDown() nie wykona żadnej akcji.

Co jeśli wysokość elementu jest zdefiniowana w CSS?

slideDown() będzie animować wysokość do wartości obliczonej przez przeglądarkę (naturalnej wysokości zawartości lub tej zdefiniowanej w CSS, jeśli jest większa od zera). slideUp() zawsze animuje do wysokości 0.

Czy te efekty działają na elementach `inline`?

Efekty slideUp()/slideDown()/slideToggle() działają najlepiej na elementach blokowych (np. div, p, ul), ponieważ operują na ich wysokości. Zastosowanie ich do elementów inline (np. span, a) może nie dać oczekiwanego rezultatu, ponieważ elementy te domyślnie nie mają wysokości w taki sam sposób jak elementy blokowe.

Czy mogę zmienić kierunek animacji (np. rozwijanie w bok)?

Metody slide* animują tylko wysokość. Do animacji szerokości lub innych właściwości należy użyć bardziej ogólnej metody .animate(), która pozwala na animowanie dowolnych właściwości CSS liczbowych.

Lekcja 11: Efekty w jQuery - Rozwijanie/Zwijanie (slideDown(), slideUp(), slideToggle())