Siaran ini menyerlahkan perbezaan utama antara hide() dan fadeOut(), show(), dan fadeIn() dalam jQuery.
Sebelum beralih kepada perbezaan antara hide() dan fadeOut(), show() dan fadeIn() dalam jQuery, mula-mula lihat asas kaedah ini dengan membaca panduan berikut:
- Kaedah fadeIn() jQuery
- Kaedah fadeOut() jQuery
- Kaedah Sembunyikan () JavaScript JQuery | Dijelaskan
- Kaedah JQuery Show() | Dijelaskan
Pertama, lihat perbezaan antara kaedah hide() dan fadeOut() dalam jQuery.
Bezakan Antara hide() dan fadeOut() dalam jQuery
Satu-satunya perbezaan utama antara ' sembunyikan() ” dan “ fadeOut() ' kaedah ialah:
- Selang Masa : ' sembunyikan() ” kaedah secara lalai menyembunyikan elemen dengan menukar kelegapannya daripada 100 kepada 0 serta-merta tanpa menggunakan sebarang selang masa, manakala “ fadeOut() ' kaedah pudar iaitu menyembunyikan elemen secara beransur-ansur dalam '400ms' yang merupakan nilai lalainya.
Mari lihat pelaksanaan praktikal perbezaan yang dinyatakan.
Mula-mula lihat kod HTML berikut:
< pusat >< id h2 = 'H2' > Selamat datang ke Linuxhint ! h2 >
< butang > Sembunyikan Elemen butang >
pusat >
Dalam baris kod di atas:
- '
teg ” melaraskan penjajaran elemen yang diberikan di tengah halaman web. - ' teg ” mencipta subtajuk tahap 2 dengan id “H2”.
- '
” tag memasukkan butang baharu.
Catatan: Kod HTML di atas diikuti sepanjang panduan ini.
Contoh: Menggunakan Kaedah 'hide()' jQuery dengan Nilai 'Lalai'.
Contoh ini menggunakan 'hide()' dengan nilai lalainya untuk menyembunyikan elemen:
< skrip >$ ( dokumen ) . sedia ( fungsi ( ) {
$ ( 'butang' ) . klik ( fungsi ( ) {
$ ( '#H2' ) . bersembunyi ( ) ;
} ) ;
} ) ;
skrip >
Dalam baris kod di atas:
- Pertama, ' sedia() ” kaedah digunakan untuk melaksanakan fungsi yang ditentukan apabila dokumen HTML semasa dimuatkan.
- Seterusnya, ' klik() ” kaedah bertanggungjawab untuk menjalankan fungsi terpaut apabila butang klik.
- Selepas itu, ' sembunyikan() kaedah ” menyembunyikan elemen tajuk yang diakses serta-merta yang idnya ialah “H2”.
Pengeluaran
Ia boleh dilihat bahawa elemen tajuk bersembunyi serta-merta apabila butang klik.
Contoh: Menggunakan Kaedah 'fadeOut()' jQuery dengan Nilai 'Lalai'.
Contoh ini menggunakan kaedah 'fadeOut()' dengan nilai lalainya untuk menyembunyikan elemen yang diberikan secara beransur-ansur dalam '400ms'.
Dalam senario ini kandungan elemen 'butang' diubah:
< butang > fadeOut ( Sembunyi unsur ) butang >Sekarang laksanakan kaedah 'fadeOut()' dengan cara ini:
< skrip >$ ( dokumen ) . sedia ( fungsi ( ) {
$ ( 'butang' ) . klik ( fungsi ( ) {
$ ( '#H2' ) . fadeOut ( ) ;
} ) ;
} ) ;
skrip >
Pada masa ini, ' fadeOut() kaedah ” digunakan untuk memadamkan elemen tajuk yang diakses dengan 400ms iaitu nilai lalai.
Pengeluaran
Output jelas menunjukkan bahawa klik butang yang diberikan menyembunyikan elemen tajuk secara beransur-ansur dalam selang masa lalai iaitu '400ms'.
Bezakan Antara show() dan fadeIn() dalam jQuery
Sama seperti kaedah 'hide()' dan 'fadeOut()', perbezaan yang sama adalah antara kaedah 'show()' dan 'fadeIn()':
- Selang Masa : ' tunjukkan() ' kaedah secara lalai memaparkan elemen tersembunyi dengan menukar kelegapannya daripada 0 kepada 100 serta-merta, manakala ' fadeIn() kaedah menunjukkan elemen tersembunyi secara beransur-ansur dalam '400ms' yang merupakan nilai lalainya.
Contoh: Menggunakan Kaedah 'show()' jQuery dengan Nilai 'Lalai'.
Contoh ini menggunakan 'show()' dengan nilai lalainya untuk memaparkan elemen tersembunyi.
Mula-mula lihat blok kod HTML yang disediakan:
< pusat >< butang > Tunjukkan Elemen butang >
< id h2 = 'H2' gaya = 'paparan: tiada' > Selamat datang ke Linuxhint ! h2 >
pusat >
Menurut senario ini, elemen tajuk yang diberikan disembunyikan dengan bantuan ' paparan: tiada ” harta benda.
Sekarang, ikuti blok kod yang diberikan untuk memahami pelaksanaan praktikal kaedah 'show()':
< skrip >$ ( dokumen ) . sedia ( fungsi ( ) {
$ ( 'butang' ) . klik ( fungsi ( ) {
$ ( '#H2' ) . tunjuk ( ) ;
} ) ;
} ) ;
skrip >
Blok kod di atas menggunakan ' tunjukkan() ” kaedah untuk memaparkan elemen tersembunyi yang ditambah serta-merta.
Pengeluaran
Ia boleh dilihat bahawa klik butang menunjukkan elemen tajuk tersembunyi dengan serta-merta.
Contoh: Menggunakan Kaedah 'fadeIn()' jQuery dengan Nilai 'Lalai'.
Contoh ini menunjukkan elemen tersembunyi menggunakan kaedah 'fadeIn()' dengan nilai lalai ' 400ms ”:
Teks elemen butang diubah mengikut senario yang diberikan:
< butang > fadeIn ( Tunjukkan unsur ) butang >Sekarang, gunakan ' fadeIn() ” kaedah menggunakan blok kod berikut:
< skrip >$ ( dokumen ) . sedia ( fungsi ( ) {
$ ( 'butang' ) . klik ( fungsi ( ) {
$ ( '#H2' ) . fadeIn ( ) ;
} ) ;
} ) ;
skrip >
Dalam blok kod ini, “ fadeIn() ' kaedah digunakan untuk menunjukkan elemen tersembunyi yang dipadankan dengan id 'H2' dalam 400ms iaitu nilai lalai.
Pengeluaran
Ia boleh diperhatikan bahawa klik butang yang diberikan menunjukkan elemen tersembunyi secara beransur-ansur dalam selang masa lalai iaitu '400ms'.
Kesimpulan
Dalam jQuery, satu-satunya perbezaan utama antara sembunyikan() dan fadeOut() , tunjukkan() , dan fadeIn() kaedah ialah “ Selang Masa ”. Kaedah 'show()' dan 'hide()' melaksanakan fungsinya serta-merta secara lalai, manakala kaedah 'fadeIn()', dan 'fadeOut()' melaksanakan tugasnya dalam selang masa lalai iaitu '400ms'. Siaran ini secara praktikal menerangkan perbezaan utama antara hide() dan fadeOut(), show(), dan fadeIn() dalam jQuery.