jQuery: Cara menggunakan hide, show, toggle, fadeOut dan fadeIn

Assalamualaikum dan selamat pagi,

tempoh hari ada yang bertanyakan bagaimana untuk menggunakan fungsi toggle dalam jQuery dan untuk memudahkan membuat rujukan di masa akan datang, aku memberitahu beliau untuk menunggu sementara aku menulis cara-cara menggunakannya dalam artikel di blog ini. Harini aku akan berkongsi cara-cara untuk menggunakan beberapa fungsi dalam jQuery ini.

Terlebih dahulu, sebelum kita boleh menggunakan fungsi jQuery ini, kita perlu memuatkan file jquery dalam halaman yang ingin kita gunakan, kod di bawah boleh digunakan untuk tujuan tersebut.

Selepas kita telah muatkan skrip jQuery seperti di atas, kita sudah boleh menggunakan fungsi-fungsi seperti hide(), show(), toggle(), fadeIn() dan juga fadeOut().

jQuery hide() dan show()

Dua fungsi ini saling berkaitan, ianya digunakan untuk memperlihatkan sesuatu elemen atau menghilangkannya. Fungsi show mempunyai format berikut, .show( [duration] [, easing] [, callback] ) dan fungsi hide mempunyai format berikut, .hide( [duration] [, easing] [, callback] ) . Contoh mudah untuk menggunakan dua fungsi ini adalah seperti kod di bawah

Show
Hide
Assalamualaikum, apa khabar?

Anda boleh melihat contoh bagaimana fungsi ini digunakan seperti di bawah:

jQuery toggle()

Fungsi toggle ini hampir sama dengan fungsi show() dan hide(), namun begitu, fungsi toggle() lebih mudah untuk digunakan, ianya akan menukar dua kondisi yang ditetapkan, contohnya show dan hide. Fungsi ini juga mempunyai format seperti hide() dan show(), .toggle( [duration] [, easing] [, callback] ). Contoh kegunaan toggle() adalah seperti dalam kod di bawah:

Toggle
Assalamualaikum, apa khabar?

Anda boleh melihat contoh bagaimana fungsi ini digunakan seperti di bawah:

jQuery fadeIn() fadeOut()

Seterusnya adalah fungsi fadeIn() dan juga fadeOut(). Dua fungsi ini menggunakan format .fadeIn( [duration] [, easing] [, callback] ) dan juga .fadeOut( [duration] [, easing] [, callback] ). Contoh kod adalah seperti di bawah

Fade In · Fade Out
Assalamualaikum, apa khabar?

Anda boleh melihat contoh bagaimana fungsi ini digunakan seperti di bawah:

Kesemua fungsi ini boleh digabungkan dengan durasi 200,300,400 atau nombor yang anda inginkan, ataupun anda boleh menggunakan slow, fast ataupun menggunakan fungsi itu seadanya tanpa memberikan sebarang durasi tambahan. Durasi default akan digunakan oleh fungsi-fungsi tersebut. Jika terdapat sebarang persoalan mengenai fungsi-fungsi ini bolehlah mengemukakan persoalan di ruangan komen.