Lekcja 9: Efekty w jQuery - Podstawowe (`show()`, `hide()`, `toggle()`)

Jedną z najbardziej rozpoznawalnych cech jQuery jest łatwość, z jaką można dodawać proste efekty wizualne do elementów strony. Podstawowe metody efektów pozwalają na płynne pokazywanie, ukrywanie i przełączanie widoczności elementów, często z możliwością kontrolowania czasu trwania animacji.

Podstawowe Metody Pokazywania/Ukrywania

.hide([czasTrwania], [funkcjaPoZakonczeniu]): Ukrywa wybrane elementy. Domyślnie dzieje się to natychmiastowo (jak ustawienie display: none;). Jeśli podany jest czasTrwania, element będzie animowany (zmniejszanie wysokości, szerokości i przezroczystości) aż do ukrycia.

// Natychmiastowe ukrycie
$("#ostrzezenie").hide();

// Ukrycie z animacją trwającą 1 sekundę (1000 ms)
$(".stare-dane").hide(1000);

// Ukrycie z animacją (szybko) i wykonanie funkcji po zakończeniu
$("img.ladowanie").hide("fast", function() {
  console.log("Obrazek ładowania został ukryty.");
});

.show([czasTrwania], [funkcjaPoZakonczeniu]): Pokazuje wybrane elementy (które były wcześniej ukryte, np. przez .hide() lub CSS display: none;). Domyślnie dzieje się to natychmiastowo. Jeśli podany jest czasTrwania, element będzie animowany (zwiększanie wysokości, szerokości i przezroczystości) aż do pełnej widoczności.
```
// Natychmiastowe pokazanie
$("#ukryty-div").show();

// Pokazanie z animacją trwającą 2 sekundy
$(".szczegoly-produktu").show(2000);

// Pokazanie z animacją (wolno) i wykonanie funkcji po zakończeniu
$("#potwierdzenie").show("slow", function() {
  alert("Element został pokazany!");
});
```

.toggle([czasTrwania], [funkcjaPoZakonczeniu]): Przełącza widoczność wybranych elementów. Jeśli element jest widoczny, zostanie ukryty; jeśli jest ukryty, zostanie pokazany. Podobnie jak .hide() i .show(), obsługuje opcjonalny czas trwania animacji i funkcję zwrotną.

// Przełączanie widoczności diva po kliknięciu przycisku
$("#przycisk-pokaz-ukryj").on("click", function() {
  $("#panel-opcji").toggle(); // Natychmiastowe przełączenie
});

// Przełączanie z animacją 500ms
$("#wiecej-info").on("click", function() {
  $(".dodatkowe-info").toggle(500);
});

Parametr `czasTrwania`

Parametr czasTrwania w metodach efektów może przyjmować:

Liczbę milisekund (np. 1000 dla 1 sekundy).
String "slow" (odpowiada 600ms).
String "fast" (odpowiada 200ms).
Jeśli pominięty lub 0, efekt jest natychmiastowy (bez animacji).

Funkcja Po Zakończeniu (Callback)

Opcjonalna funkcja zwrotna (callback) jest wykonywana po zakończeniu animacji dla każdego animowanego elementu. Wewnątrz tej funkcji this odnosi się do elementu, którego animacja właśnie się zakończyła.

$(".element").hide(1000, function() {
  // Ten kod wykona się dla każdego elementu .element PO jego ukryciu
  console.log("Element", this.id, "został ukryty.");
  $(this).remove(); // Bezpieczne usunięcie elementu po animacji
});

Kolejkowanie Efektów

jQuery automatycznie kolejkuje efekty wywoływane na tym samym elemencie. Oznacza to, że jeśli wywołasz kilka metod efektów jedna po drugiej, zostaną one wykonane sekwencyjnie.

$("#mojDiv")
  .hide(1000) // Najpierw ukryj przez 1s
  .show(500)  // Potem pokaż przez 0.5s
  .hide("fast"); // Na koniec ukryj szybko

Animacje będą uruchamiane jedna po drugiej.

Zadanie praktyczne

Stwórz plik HTML z:

Przyciskiem z ID "przycisk-toggle".
Div-em z ID "tekst-do-przelaczania" zawierającym jakiś tekst, początkowo widocznym.
Drugim Div-em z ID "obrazek-kontener" zawierającym obrazek (<img src="..." alt="...">), początkowo ukrytym (możesz użyć stylu inline style="display: none;" lub klasy CSS).
Przyciskiem z ID "pokaz-obrazek".

Używając jQuery:

Po kliknięciu przycisku "przycisk-toggle", przełączaj widoczność diva "tekst-do-przelaczania" z animacją trwającą 500ms (użyj .toggle()).
Po kliknięciu przycisku "pokaz-obrazek", pokaż div "obrazek-kontener" z animacją "slow" (użyj .show()).
Dodaj funkcję zwrotną do metody .show() z punktu 2, która wyświetli w konsoli komunikat "Obrazek został pokazany!" po zakończeniu animacji.

Pokaż rozwiązanie

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Test Efektów Podstawowych</title>
</head>
<body>
    <button id="przycisk-toggle">Przełącz Tekst</button>
    <div id="tekst-do-przelaczania">
        To jest tekst, który będzie pokazywany i ukrywany.
    </div>

    <hr>

    <button id="pokaz-obrazek">Pokaż Obrazek</button>
    <div id="obrazek-kontener" style="display: none; margin-top: 10px;">
        <!-- Zastąp ścieżkę do obrazka poprawną ścieżką lub URL -->
        <img src="https://via.placeholder.com/150" alt="Przykładowy obrazek">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function() {
            // 1. Przełączanie widoczności tekstu
            $("#przycisk-toggle").on("click", function() {
                $("#tekst-do-przelaczania").toggle(500);
                console.log("Przełączono widoczność tekstu.");
            });

            // 2. Pokazywanie obrazka z funkcją zwrotną
            $("#pokaz-obrazek").on("click", function() {
                $("#obrazek-kontener").show("slow", function() {
                    // 3. Funkcja zwrotna po pokazaniu obrazka
                    console.log("Obrazek został pokazany!");
                });
            });
        });
    </script>
</body>
</html>

Zadanie do samodzielnego wykonania

Stwórz trzy divy z klasą "box" i różnymi kolorami tła. Dodaj przycisk "Ukryj Wszystkie Boxy".

Używając jQuery:

Po kliknięciu przycisku "Ukryj Wszystkie Boxy", ukryj wszystkie divy z klasą "box" z animacją trwającą 1 sekundę.
Dodaj funkcję zwrotną do metody .hide(), która po ukryciu każdego boxa wyświetli w konsoli jego ID (jeśli je ma) lub tekst "Ukryto box".
Dodaj drugi przycisk "Pokaż Pierwszy Box". Po jego kliknięciu, pokaż tylko pierwszy div z klasą "box" (użyj selektora :first) z szybką animacją ("fast").

FAQ - Podstawowe Efekty jQuery

Jak działa animacja w `show()`/`hide()`/`toggle()`?

jQuery animuje jednocześnie wysokość, szerokość i przezroczystość elementu od/do zera. Po zakończeniu animacji ukrywania, jQuery dodatkowo ustawia display: none;. Przy pokazywaniu przywraca oryginalną wartość display (lub domyślną dla danego typu elementu).

Czy mogę przerwać trwającą animację?

Tak, można użyć metody .stop([clearQueue], [jumpToEnd]). Wywołanie $(selektor).stop() zatrzyma bieżącą animację na elemencie. Opcjonalne argumenty pozwalają kontrolować, czy usunąć resztę animacji z kolejki i czy natychmiast przejść do końcowego stanu bieżącej animacji.

Co jeśli element jest już widoczny, a wywołam `.show()`?

Nic się nie stanie. jQuery jest na tyle inteligentne, że jeśli element jest już w stanie docelowym (np. widoczny przy wywołaniu .show()), to metoda po prostu nic nie robi (ani nie wykonuje animacji, ani funkcji zwrotnej).

Czy `.toggle()` zawsze animuje?

.toggle() animuje tylko wtedy, gdy podasz argument czasTrwania (liczbę lub string "fast"/"slow"). Jeśli wywołasz .toggle() bez argumentów, przełączenie widoczności będzie natychmiastowe, bez animacji.

Czy te metody działają, jeśli element jest ukryty za pomocą CSS `visibility: hidden`?

Metody .hide(), .show() i .toggle() operują głównie na właściwości display. Jeśli element jest ukryty przez visibility: hidden, .show() nie sprawi, że stanie się widoczny. Do kontrolowania visibility lepiej użyć metody .css("visibility", "visible" / "hidden").

Lekcja 9: Efekty w jQuery - Podstawowe (show(), hide(), toggle())