Jquery płynna zmiana przezroczystości. Jak uzyskać płynną przezroczystość elementu internetowego za pomocą jQuery

Wynik naszego przykładu.

Animacja na nowoczesnych stronach internetowych od dawna jest uważana za pewnik. Zanikające elementy, latające wiadomości, przesuwane galerie obrazów poprawiają wrażenia użytkownika i zwiększają wydajność witryny. W popularnej bibliotece javascript jQuery fadeIn() jest jedną z podstawowych funkcji animacji. Kontroluje przezroczystość bloków.

Efekty zanikania

Metoda fadeIn() zmienia przezroczystość przekazanego elementu do 100%. W bibliotece jQuery jest sparowany z funkcją fadeOut(), której można użyć do unieważnienia nieprzezroczystości i tym samym „rozpuszczenia” elementu.

Podobny efekt można osiągnąć stosując metodę fadeTo(), która ma jeszcze szerszy zakres oddziaływania. FadeTo() może ustawić dowolną wartość przezroczystości w zakresie od 0 do 1.

Składnia metody

Metoda fadeIn() w jQuery jest wywoływana w kontekście elementu, którego krycie należy zmienić. Może przyjąć od zera do trzech parametrów:

Element.zanikanie (); element.fadeIn (czas trwania); element.fadeIn (czas trwania, wywołanie zwrotne); element.fadeIn (czas trwania, wygładzanie, wywołanie zwrotne); element.fadeIn (konfiguracja);

Argument trwania określa, jak długo potrwa animacja. Może to być liczba reprezentująca liczbę milisekund lub jedno ze słów kluczowych:

• "szybko" (200ms);
• „wolny” (600ms);

Jeśli nie ustawiono czasu trwania, domyślnie wynosi 400 milisekund.

Parametr callback oznacza funkcję, która zostanie wywołana natychmiast po zakończeniu animacji. Funkcja callback nie przyjmuje żadnych parametrów. Znajdująca się w nim zmienna this odnosi się do modyfikowanego węzła DOM.

Argument wygładzania kontroluje czas animacji, to znaczy jej szybkość w czasie. Możesz go użyć, aby przyspieszyć początek i spowolnić koniec animacji lub ujednolicić ją w całym tekście. Wartość argumentu to ciąg znaków zawierający słowo kluczowe, domyślnie jest to funkcja „swing”.

Poniżej funkcja fadeIn() będzie równomiernie zwiększać przezroczystość elementu z klasą .block na jedną sekundę, po czym wyświetli komunikat do konsoli:

$ (". blok"). fadeIn (1000, liniowy, funkcja () (console.log ("Animacja zakończona");));

Jeśli wymienione parametry nie są wystarczające, do metody można przekazać obiekt konfiguracyjny, który może zawierać do 11 różnych ustawień.

Funkcje zwrotne

Parametr wywołania zwrotnego przekazywany do metody fadeIn() jQuery jest bardzo przydatną opcją, ponieważ zmiany właściwości są wykonywane asynchronicznie bez blokowania ogólnego przepływu wykonywania kodu.

Const callback = function() (console.log ("Animacja zakończona");); $ (". element"). zanikanie (1000); oddzwonić ();

W tym przykładzie funkcja zostanie uruchomiona natychmiast po rozpoczęciu animacji, bez czekania na pojawienie się elementu w całości.

Aby wszystko działało zgodnie z przeznaczeniem, użyj argumentu wywołania zwrotnego, aby złapać koniec animacji:

Const callback = function() (console.log ("Animacja zakończona");); $ (". element"). fadeIn (1000, callback);

Teraz komunikat będzie wyświetlany w konsoli tylko wtedy, gdy element stanie się w pełni widoczny.

Pełna przezroczystość i ukrywanie elementów

Jak wiadomo, zerowa wartość właściwości opacity nie usuwa elementu ze strony, a jedynie czyni go niewidocznym. To zachowanie nie jest odpowiednie, jeśli chcemy ukryć blok.

Dlatego metody zanikania jQuery fadeIn(), fadeTo() i fadeOut() działają z przezroczystością w połączeniu z właściwością display. Całkowicie przezroczysty element jest ukrywany za pomocą wyświetlacza: brak reguły, a ta reguła jest anulowana, zanim się pojawi.

Zmienia poziom przezroczystości wybranych elementów na stronie. Umożliwia płynną zmianę przezroczystości. Metoda ma dwa przypadki użycia:

Trwanie- czas trwania zmiany przejrzystości. Można go określić w milisekundach lub jako wartość ciągu „szybko” lub „wolno” (200 i 600 milisekund).
nieprzezroczystość- wartość wymaganej przejrzystości. Należy podać liczbę od 0 do 1 (0 – pełna przezroczystość, 1 – brak przezroczystości).
oddzwonić- funkcja określona jako procedura obsługi zakończenia zmiany przezroczystości. Nie są do niej przekazywane żadne parametry, jednak wewnątrz funkcji zmienna ta będzie zawierała obiekt DOM elementu, którego przezroczystość jest zmieniona. Jeśli jest kilka takich elementów, to handler będzie wywoływany osobno, dla każdego elementu.

Trwanie- patrz opis powyżej. Domyślnie parametr to 400
nieprzezroczystość- patrz wyżej.
łagodzenie- dynamika zmiany przezroczystości (czy spowolni do końca egzekucji, czy wręcz przeciwnie, przyspieszy). (Zobacz opis)
oddzwonić- patrz wyżej.

• zmień przezroczystość
• ustawić przezroczystość na element
• ustaw poziom przezroczystości na element
• przezroczystość elementu
• .zniknąć do ()
• zniknąć do ()

Ostatnia aktualizacja: 1.11.2015

Efekty przezroczystości pozwalają nam, poprzez płynną zmianę przezroczystości elementu, ukryć go lub pokazać. Efekty przezroczystości są implementowane za pomocą metod fadeOut(), fadeIn(), fadeTo() i fadeToggle().

Metody fadeOut(), fadeIn() i fadeToggle() mają podobne zastosowania:

fadeOut / fadeIn / fadeToggle (): metoda bez parametrów

fadeOut / fadeIn / fadeToggle ([, wygładzanie] [, pełne]). Parametr duration określa, jak długo potrwa zmiana przezroczystości elementu. Domyślnie jego wartość to 400 milisekund.

Parametr easing, który przyjmuje nazwę funkcji easing jako ciąg znaków. Domyślnie jego wartość to „swing”. Możesz także użyć wartości „wolno” i „szybko”, które odpowiadają czasom trwania efektów wynoszącym 600 i 200 milisekund.

Kompletny parametr reprezentuje funkcję zwrotną, która ma być wywołana przez metodę po zakończeniu animacji

Metoda fadeTo, w przeciwieństwie do innych metod, również przyjmuje parametr opacity - przyjmuje wartość, na którą należy zmienić przezroczystość elementu: fadeTo (duration, opacity [, easing] [, complete]). Wartość krycia mieści się w zakresie od 0 (w pełni przezroczysta) do 1 (w pełni widoczna).

Powiedzmy, że mamy obrazek na stronie i dwa przyciski, które zmienią przezroczystość tego obrazu:

Wyświetlacz Ukrywać

Zauważ, że metoda fadeIn zwiększa przezroczystość do wartości sprzed użycia metody fadeOut, a niekoniecznie do 1. To znaczy w tym przypadku, ponieważ metoda fadeTo została zastosowana na początku i przezroczystość została zmieniona na 0,6, Metoda fadeIn zwiększy również przezroczystość do 0,6.