W tym poście wyjaśniono praktyczną implementację metody fadeOut() jQuery w celu uzyskania płynnego efektu zanikania.
Jak stworzyć płynne efekty zanikania za pomocą metody fadeOut() jQuery?
jQuery” zanikanie() ” powoduje stopniowe ukrywanie wybranego elementu poprzez zmniejszenie jego przezroczystości. Metoda ta zmienia stan wybranego elementu z widocznego na ukryty. Ukryty element nie jest wyświetlany na stronie internetowej, dopóki użytkownik nie wyświetli go ponownie za pomocą przycisku „ zanikanie() ' metoda.
Składnia
$ ( selektor ) . zanikanie ( prędkość, złagodzenie, oddzwonienie ) ;
Powyższa składnia obsługuje następujące opcjonalne parametry umożliwiające dostosowanie efektu zanikania:
- prędkość: Określa prędkość efektu zanikania w milisekundach. Domyślnie jego wartość to „400ms”. Co więcej, obsługuje także dwie wbudowane wartości „wolno” i „szybko”.
- złagodzenie: Pokazuje zanikającą prędkość animacji w różnych punktach. Domyślnie jego wartość to „swing (wolniejszy na początku/końcu i wolny w środku)”. Ponadto działa również w trybie „liniowym (stała prędkość w animacji zanikania)”.
- oddzwonić: Definiuje funkcję zdefiniowaną przez użytkownika, która jest wykonywana po zakończeniu animacji zanikania w celu wykonania zdefiniowanego zadania.
Zastosujmy powyższą metodę w praktyce.
Kod HTML
Zanim przejdziemy do metody „fadeOut()” przyjrzyjmy się poniższemu kodowi HTML tworzącemu przykładowy element „div”, na którym zostanie wykonany efekt zanikania:
< przycisk > zanikanie ( Ukrywać Element ) przycisk >< br >< br >< identyfikator działu = „mójDiv” styl = „wysokość: 80 pikseli; szerokość: 300 pikseli; obramowanie: 2 piksele w kolorze czarnym; margines: automatyczny; wyrównanie tekstu: do środka” >
< h2 > Witamy w Linuxhincie h2 >
div >
W powyższych liniach kodu:
- „
” dodaje element przycisku. - „ ” tworzy element div o identyfikatorze „myDiv” i jest stylizowany za pomocą następujących właściwości stylizacji (wysokość, szerokość, obramowanie, margines, wyrównanie tekstu).
- Wewnątrz elementu div, „ ” określa pierwszy element podtytułu poziomu 2.
Teraz zacznij od pierwszego przykładu.
Przykład 1: Tworzenie płynnych efektów zanikania przy użyciu domyślnej wartości fadeOut().
Pierwszy przykład ukrywa dopasowany element div, wykorzystując metodę „fadeOut()” z wartością domyślną „400ms”:
< scenariusz >
$ ( dokument ) . gotowy ( funkcjonować ( ) {
$ ( 'przycisk' ) . Kliknij ( funkcjonować ( ) {
$ ( „#myDiv” ) . zanikanie ( ) ;
} ) ;
} ) ;
scenariusz >W powyższych liniach kodu:
- Po pierwsze, „ gotowy() ” wykonuje podane funkcje po załadowaniu bieżącego dokumentu HTML/DOM.
- Następnie „ Kliknij() ” wykonuje połączoną funkcję po kliknięciu przycisku, gdy zostanie kliknięty skojarzony z nim selektor „przycisku”.
- Następnie „ zanikanie() ” ukrywa element div, do którego uzyskano dostęp, którego identyfikator to „myDiv” w ciągu 400 ms, tj. wartością domyślną.
Wyjście
Obserwuje się, że kliknięcie danego przycisku powoduje stopniowe wygaszanie elementu div w ciągu „400 ms”.
Przykład 2: Utwórz płynne efekty zanikania za pomocą parametru „speed” fadeOut().
W tym przykładzie zastosowano metodę „fadeOut()” z wbudowanymi wartościami (slow/fast) parametru „speed”:
< scenariusz >
$ ( dokument ) . gotowy ( funkcjonować ( ) {
$ ( 'przycisk' ) . Kliknij ( funkcjonować ( ) {
$ ( „#myDiv” ) . zanikanie ( 'powolny' ) ;
} ) ;
} ) ;
scenariusz >Teraz ' zanikanie() ” metoda przechodzi „ powolny ” jako parametr, aby płynnie stworzyć efekt zanikania, czyli zmienić stan wybranego elementu div z widocznego na ukryty.
Wyjście
Można zauważyć, że wybrany element div powoli chowa się po kliknięciu przycisku.
Przykład 3: Utwórz płynne efekty zanikania za pomocą parametru „duration” fadeOut().
W tym przykładzie zastosowano metodę „fadeOut()” z określoną liczbą milisekund jako parametrem czasu trwania:
< scenariusz >
$ ( dokument ) . gotowy ( funkcjonować ( ) {
$ ( 'przycisk' ) . Kliknij ( funkcjonować ( ) {
$ ( „#myDiv” ) . zanikanie ( 6000 ) ;
} ) ;
} ) ;
scenariusz >Teraz metoda „fadeOut()” wykorzystuje określoną liczbę milisekund, aby ukryć dopasowany element w określonym czasie.
Wyjście
Powyższe dane wyjściowe ukrywają zmiany danego elementu div po kliknięciu przycisku w danym przedziale czasu.
Przykład 4: Utwórz płynne efekty zanikania za pomocą funkcji „callback” fadeOut().
W tym przykładzie wykonywana jest funkcja wywołania zwrotnego po zakończeniu efektu zanikania za pomocą metody „fadeOut()”:
< scenariusz >
$ ( dokument ) . gotowy ( funkcjonować ( ) {
$ ( 'przycisk' ) . Kliknij ( funkcjonować ( ) {
$ ( „#myDiv” ) . zanikanie ( 4000 , funkcja ( ) {
konsola. dziennik ( „Dany element div został pomyślnie ukryty!” )
} ) ;
} ) ;
} ) ;
scenariusz >W podanym bloku kodu:
- „ zanikanie() ” wygasza dopasowany element div w określonej liczbie milisekund, a następnie wykonuje dostarczoną funkcję „callback”.
- W środku ' oddzwonić ”, funkcja „ konsola.log() ” stosowana jest w celu wyświetlenia określonej instrukcji po zakończeniu efektu „zanikania”.
Wyjście
Widać, że „konsola” pokazuje instrukcję zdefiniowaną w funkcji wywołania zwrotnego po ukryciu danego elementu div.
Przykład 5: Utwórz płynne efekty zanikania za pomocą parametru „easing” fadeOut().
W tym przykładzie zastosowano metodę „fadeOut()” z możliwymi wartościami parametru „easing”:
< scenariusz >
$ ( dokument ) . gotowy ( funkcjonować ( ) {
$ ( 'przycisk' ) . Kliknij ( funkcjonować ( ) {
$ ( „#myDiv” ) . zanikanie ( 4000 , 'liniowy' ) ;
} ) ;
} ) ;
scenariusz >Teraz ' zanikanie() ” wykonuje efekt zanikania w określonej liczbie milisekund ze stałą prędkością ze względu na „ liniowy ' wartość.
Wyjście
Wyjście zmienia stan danego elementu z widocznego na ukryty ze stałą szybkością. To wszystko, jeśli chodzi o wdrożenie efektu „zanikania” na elemencie.
Wniosek
Aby utworzyć płynny efekt zanikania za pomocą „ zanikanie() ”, użytkownik nie wymaga żadnego dodatkowego parametru. Metoda ta polega na stopniowym ukrywaniu elementu poprzez zmianę jego krycia. Jeśli użytkownik musi wykonać efekt zanikania w określonej liczbie milisekund, wykonaj funkcję wywołania zwrotnego, a następnie użyj parametrów „speed”, „easing” i „callback” w metodzie „fadeOut()”. W tym poście praktycznie wyjaśniono metodę fadeOut() jQuery służącą do tworzenia płynnego efektu zanikania.