W tym poście omówiono kluczowe różnice między funkcjami hide() i fadeOut(), show() i fadeIn() w jQuery.
Zanim przejdziemy do różnic pomiędzy hide() i fadeOut(), show() i fadeIn() w jQuery, najpierw przyjrzyjmy się podstawom tych metod, czytając poniższe poradniki:
- Metoda fadeIn() jQuery
- Metoda fadeOut() jQuery
- Metoda JavaScript JQuery Hide() | Wyjaśnione
- Metoda JQuery Show() | Wyjaśnione
Najpierw zobacz różnicę między metodami hide() i fadeOut() w jQuery.
Rozróżnij hide() i fadeOut() w jQuery
Jedyna główna różnica pomiędzy „ ukrywać() ' I ' zanikanie() metoda to:
- Przedział czasowy : „ ukrywać() ” domyślnie ukrywa element poprzez natychmiastową zmianę jego krycia ze 100 na 0, bez zajmowania żadnego przedziału czasu, natomiast metoda „ zanikanie() ” zanika, tzn. stopniowo ukrywa element w „400ms”, co jest jego wartością domyślną.
Zobaczmy praktyczne wdrożenie stwierdzonej różnicy.
Najpierw spójrz na następujący kod HTML:
< Centrum >< h2 identyfikator = „H2” > Witamy w Linuxhincie ! h2 >
< przycisk > Ukryj element przycisk >
Centrum >
W powyższych liniach kodu:
- „ <środek> ” reguluje ustawienie poszczególnych elementów na środku strony.
- „ ” tworzy podtytuł poziomu 2 o identyfikatorze „H2”.
- „
” dodaje nowy przycisk.
Notatka: W całym przewodniku zastosowano powyższy kod HTML.
Przykład: zastosowanie metody jQuery „hide()” z wartością „Domyślną”.
W tym przykładzie zastosowano funkcję „hide()” z wartościami domyślnymi w celu ukrycia elementu:
< scenariusz >$ ( dokument ) . gotowy ( funkcjonować ( ) {
$ ( 'przycisk' ) . Kliknij ( funkcjonować ( ) {
$ ( „#H2” ) . ukrywać ( ) ;
} ) ;
} ) ;
scenariusz >
W powyższych liniach kodu:
- Po pierwsze, „ gotowy() ” jest stosowana do wykonania określonych funkcji po załadowaniu bieżącego dokumentu HTML.
- Następnie „ Kliknij() ” jest odpowiedzialna za wykonanie powiązanej funkcji po kliknięciu przycisku.
- Następnie „ ukrywać() ” natychmiast ukrywa element nagłówka, do którego uzyskano dostęp, którego identyfikator to „H2”.
Wyjście
Można zauważyć, że element nagłówka ukrywa się natychmiast po kliknięciu przycisku.
Przykład: zastosowanie metody jQuery „fadeOut()” z wartością „Domyślną”.
W tym przykładzie zastosowano metodę „fadeOut()” z wartościami domyślnymi, aby stopniowo ukrywać dany element w „400ms”.
W tym scenariuszu zmieniana jest zawartość elementu „button”:
< przycisk > zanikanie ( Ukrywać Element ) przycisk >Teraz zaimplementuj metodę „fadeOut()” w następujący sposób:
< scenariusz >$ ( dokument ) . gotowy ( funkcjonować ( ) {
$ ( 'przycisk' ) . Kliknij ( funkcjonować ( ) {
$ ( „#H2” ) . zanikanie ( ) ;
} ) ;
} ) ;
scenariusz >
W tym czasie „ zanikanie() ” stosowana jest w celu wygaszenia dostępnego elementu nagłówka z czasem 400 ms, czyli wartością domyślną.
Wyjście
Dane wyjściowe wyraźnie pokazują, że dane kliknięcie przycisku powoduje stopniowe ukrywanie elementu nagłówka w domyślnym przedziale czasu, tj. „400ms”.
Rozróżnij show() i fadeIn() w jQuery
Podobnie jak w przypadku metod „hide()” i „fadeOut()”, ta sama różnica występuje pomiędzy metodami „show()” i „fadeIn()”:
- Przedział czasowy : „ pokazywać() ” domyślnie wyświetla ukryty element poprzez natychmiastową zmianę jego krycia z 0 na 100, natomiast metoda „ zanikanie() ” pokazuje ukryty element stopniowo w „400ms”, co jest wartością domyślną.
Przykład: zastosowanie metody jQuery „show()” z wartością „Domyślną”.
W tym przykładzie zastosowano metodę „show()” z wartościami domyślnymi w celu wyświetlenia ukrytego elementu.
Najpierw spójrz na dostarczony blok kodu HTML:
< Centrum >< przycisk > Pokaż element przycisk >
< h2 identyfikator = „H2” styl = 'Nie wyświetla się' > Witamy w Linuxhincie ! h2 >
Centrum >
Zgodnie z tym scenariuszem dany element nagłówka jest ukrywany za pomocą przycisku „ Nie wyświetla się ' nieruchomość.
Teraz postępuj zgodnie z podanym blokiem kodu, aby zrozumieć praktyczną implementację metody „show()”:
< scenariusz >$ ( dokument ) . gotowy ( funkcjonować ( ) {
$ ( 'przycisk' ) . Kliknij ( funkcjonować ( ) {
$ ( „#H2” ) . pokazywać ( ) ;
} ) ;
} ) ;
scenariusz >
Powyższy blok kodu wykorzystuje „ pokazywać() ”, aby natychmiast wyświetlić dodany ukryty element.
Wyjście
Można zauważyć, że kliknięcie przycisku natychmiast pokazuje ukryty element nagłówka.
Przykład: zastosowanie metody jQuery „fadeIn()” z wartością „Domyślną”.
Ten przykład pokazuje ukryty element przy użyciu metody „fadeIn()” z wartością domyślną „ 400ms ”:
Tekst elementu przycisku zmienia się zgodnie z podanym scenariuszem:
< przycisk > zanikanie ( Pokazywać Element ) przycisk >Teraz zastosuj „ zanikanie() ” przy użyciu następującego bloku kodu:
< scenariusz >$ ( dokument ) . gotowy ( funkcjonować ( ) {
$ ( 'przycisk' ) . Kliknij ( funkcjonować ( ) {
$ ( „#H2” ) . zanikanie ( ) ;
} ) ;
} ) ;
scenariusz >
W tym bloku kodu „ zanikanie() ” służy do pokazania ukrytego elementu dopasowanego do identyfikatora „H2” w ciągu 400 ms, tj. wartości domyślnej.
Wyjście
Można zauważyć, że dane kliknięcie przycisku powoduje stopniowe wyświetlanie ukrytego elementu w domyślnym przedziale czasu tj. „400ms”.
Wniosek
W jQuery jedyna kluczowa różnica między ukrywać() I zanikanie() , pokazywać() , I zanikanie() metoda to „ Przedział czasowy ”. Metody „show()” i „hide()” domyślnie wykonują swoje funkcjonalności natychmiast, natomiast metody „fadeIn()” i „fadeOut()” wykonują swoje zadania w domyślnym przedziale czasu tj. „400ms”. W tym poście praktycznie wyjaśniono kluczowe różnice między hide() i fadeOut(), show() i fadeIn() w jQuery.