Posting ini menyoroti perbedaan utama antara hide() dan fadeOut(), show(), dan fadeIn() di jQuery.
Sebelum beralih ke perbedaan antara hide() dan fadeOut(), show() dan fadeIn() di jQuery, lihat dulu dasar-dasar metode ini dengan membaca panduan berikut:
- Metode fadeIn() jQuery
- Metode fadeOut() jQuery
- Metode JavaScript JQuery Sembunyikan() | Dijelaskan
- Metode Pertunjukan JQuery() | Dijelaskan
Pertama, lihat perbedaan antara metode hide() dan fadeOut() di jQuery.
Bedakan Antara hide() dan fadeOut() di jQuery
Satu-satunya perbedaan utama antara “ bersembunyi() ' Dan ' memudar() ” metodenya adalah:
- Jarak waktu : “ bersembunyi() Metode ” secara default menyembunyikan elemen dengan segera mengubah opasitasnya dari 100 menjadi 0 tanpa menghabiskan interval waktu apa pun, sedangkan metode “ memudar() ” Metode fade out yaitu menyembunyikan elemen secara bertahap dalam “400ms” yang merupakan nilai defaultnya.
Mari kita lihat implementasi praktis dari perbedaan yang disebutkan.
Pertama lihat kode HTML berikut:
< tengah >< h2 identitas = 'H2' > Selamat datang di Linuxhint ! h2 >
< tombol > Sembunyikan Elemen tombol >
tengah >
Pada baris kode di atas:
- “
” Tag menyesuaikan perataan elemen tertentu di tengah halaman web. - “ ” tag membuat subjudul level 2 dengan id “H2”.
- “
” tag menyisipkan tombol baru.
Catatan: Kode HTML di atas diikuti sepanjang panduan ini.
Contoh: Menerapkan Metode jQuery “hide()” dengan Nilai “Default”.
Contoh ini menerapkan “hide()” dengan nilai defaultnya untuk menyembunyikan elemen:
< naskah >$ ( dokumen ) . siap ( fungsi ( ) {
$ ( 'tombol' ) . klik ( fungsi ( ) {
$ ( '#H2' ) . bersembunyi ( ) ;
} ) ;
} ) ;
naskah >
Pada baris kode di atas:
- Pertama, “ siap() Metode ” diterapkan untuk menjalankan fungsi yang ditentukan saat dokumen HTML saat ini dimuat.
- Selanjutnya, “ klik() Metode ” bertanggung jawab untuk menjalankan fungsi tertaut setelah tombol diklik.
- Setelah itu, “ bersembunyi() Metode ” segera menyembunyikan elemen judul yang diakses yang idnya adalah “H2”.
Keluaran
Dapat dilihat bahwa elemen judul langsung bersembunyi setelah tombol diklik.
Contoh: Menerapkan Metode jQuery “fadeOut()” dengan Nilai “Default”.
Contoh ini menggunakan metode “fadeOut()” dengan nilai defaultnya untuk secara bertahap menyembunyikan elemen tertentu dalam “400ms”.
Dalam skenario ini konten elemen “tombol” diubah:
< tombol > memudar ( Bersembunyi Elemen ) tombol >Sekarang implementasikan metode “fadeOut()” dengan cara ini:
< naskah >$ ( dokumen ) . siap ( fungsi ( ) {
$ ( 'tombol' ) . klik ( fungsi ( ) {
$ ( '#H2' ) . memudar ( ) ;
} ) ;
} ) ;
naskah >
Pada saat ini, “ memudar() Metode ” diterapkan untuk memudarkan elemen judul yang diakses dengan 400 ms yaitu nilai default.
Keluaran
Outputnya dengan jelas menunjukkan bahwa klik tombol yang diberikan menyembunyikan elemen judul secara bertahap dalam interval waktu default yaitu “400ms”.
Bedakan Antara show() dan fadeIn() di jQuery
Mirip dengan metode “hide()” dan “fadeOut()”, perbedaan yang sama antara metode “show()” dan “fadeIn()”:
- Jarak waktu : “ menunjukkan() Metode ” secara default menampilkan elemen tersembunyi dengan segera mengubah opasitasnya dari 0 menjadi 100, sedangkan metode “ memudar() Metode ” menampilkan elemen tersembunyi secara bertahap dalam “400ms” yang merupakan nilai defaultnya.
Contoh: Menerapkan Metode jQuery “show()” dengan Nilai “Default”.
Contoh ini menerapkan “show()” dengan nilai defaultnya untuk menampilkan elemen tersembunyi.
Pertama lihat blok kode HTML yang disediakan:
< tengah >< tombol > Tampilkan Elemen tombol >
< h2 identitas = 'H2' gaya = 'tampilan: tidak ada' > Selamat datang di Linuxhint ! h2 >
tengah >
Menurut skenario ini, elemen judul tertentu disembunyikan dengan bantuan “ tampilan: tidak ada ' Properti.
Sekarang, ikuti blok kode yang diberikan untuk memahami implementasi praktis dari metode “show()”:
< naskah >$ ( dokumen ) . siap ( fungsi ( ) {
$ ( 'tombol' ) . klik ( fungsi ( ) {
$ ( '#H2' ) . menunjukkan ( ) ;
} ) ;
} ) ;
naskah >
Blok kode di atas menggunakan “ menunjukkan() ” metode untuk segera menampilkan elemen tersembunyi yang ditambahkan.
Keluaran
Terlihat bahwa klik tombol langsung menampilkan elemen header yang tersembunyi.
Contoh: Menerapkan Metode jQuery “fadeIn()” dengan Nilai “Default”.
Contoh ini menunjukkan elemen tersembunyi menggunakan metode “fadeIn()” dengan nilai default “ 400 md ”:
Teks elemen tombol diubah sesuai dengan skenario yang diberikan:
< tombol > memudar ( Menunjukkan Elemen ) tombol >Sekarang, terapkan “ memudar() ” metode menggunakan blok kode berikut:
< naskah >$ ( dokumen ) . siap ( fungsi ( ) {
$ ( 'tombol' ) . klik ( fungsi ( ) {
$ ( '#H2' ) . memudar ( ) ;
} ) ;
} ) ;
naskah >
Dalam blok kode ini, “ memudar() Metode ” digunakan untuk menampilkan elemen tersembunyi yang cocok dengan id “H2” dalam 400 ms yaitu nilai default.
Keluaran
Dapat diamati bahwa klik tombol yang diberikan menunjukkan elemen tersembunyi secara bertahap dalam interval waktu default yaitu “400ms”.
Kesimpulan
Di jQuery, satu-satunya perbedaan utama antara bersembunyi() Dan memudar() , menunjukkan() , Dan memudar() metodenya adalah “ Jarak waktu ”. Metode “show()” dan “hide()” segera menjalankan fungsinya secara default, sedangkan metode “fadeIn()”, dan “fadeOut()” menjalankan tugasnya dalam interval waktu default yaitu “400ms”. Posting ini secara praktis menjelaskan perbedaan utama antara hide() dan fadeOut(), show(), dan fadeIn() di jQuery.