If you're seeing this message, it means we're having trouble loading external resources on our website.

Jeżeli jesteś za filtrem sieci web, prosimy, upewnij się, że domeny *.kastatic.org i *.kasandbox.org są odblokowane.

Główna zawartość

Przypomnienie: Animacja DOM z jQuery

jQuery oferuje szereg funkcji do animacji i efektów, które są opisane w dokumentacji.

Zmiana widoczności

Dla prostych zmian widoczności możesz użyć hide() i show():
$("#pic").hide();
$("#pic").show(); (Zobacz przykład)
Możesz także użyć funkcji toggle(), która zdecyduje, czy należy schować lub pokazać element w zależności od obecnego stanu: $("#pic").toggle(); (Zobacz przykład)
Możesz przekazać czas trwania do każdej z tych funkcji, a jQuery będzie animował widoczność w czasie podanym przez ciebie: $("#pic").toggle(1000);
Możesz także użyć slideDown(), slideUp() i slideToggle() do efektu przesuwania (Zobacz przykład) lub fadeIn(), fadeOut() i fadeToggle() do zanikania i przenikania (Zobacz przykład).
Możesz przekazać funkcję zwrotną do drugiego parametru każdej z tych funkcji, a jQuery wykona funkcję zwrotną, gdy animacja się skończy:
$("#pic").toggle(1000, function() {
    $("body").append("It's here!");
});
Możesz łączyć wiele efektów w jeden korzystając z delay() jeśli chciałbyś opóźnienie między nimi:
$("#pic").slideUp(300).delay().fadeIn();

Niestandardowa animacja

Jeśli chcesz animować określone właściwości CSS możesz użyć animate():
    $("#pic").animate({
       width: "70%",
       opacity: 0.7,
       padding: 20
    }, 1000);
Należy pamiętać, że możesz animować tylko właściwości CSS, które przyjmują wartości numeryczne - więc nie możesz animować takich właściwości jak 'color'. (Zobacz przykład)
Możesz dodać wiele różnych funkcji zwrotnych do animate(), jeśli chciałbyś się dowiedzieć czy animacja się wykonuje lub się wykonała. Sprawdź dokumentację, jeśli chcesz się dowiedzieć więcej.

Odpowiedzialne animowanie

Animacje powinny zawsze poprawiać wrażenia użytkownika, nigdy nie powinny ich pogarszać. Animacje powinny pomóc użytkownikom zrozumieć coś o stanie twojej aplikacji lub dodawać odrobinę zabawy - nie powinny spowalniać działania strony lub frustrować użytkownika. Spytaj użytkowników o opinię lub poproś designera o pomoc z wybraniem elementów do animacji.
Jeśli wiesz, że urządzenie użytkownika nie działa zbyt dobrze, gdy wszystkie animacje działają, możesz ustawić $.fx.off na wartość true.

Chcesz dołączyć do dyskusji?

Na razie brak głosów w dyskusji
Rozumiesz angielski? Kliknij tutaj, aby zobaczyć więcej dyskusji na angielskiej wersji strony Khan Academy.