JQuery Tutorial Part 2 : Hide/Show and Fade on JQuery

Assalammualaikum Wr. Wb.

Kali ini saya akan sharing mengenai Hide, Show, dan juga Fade yang terdapat pada JQuery. apa sih itu?, dan bagaimana cara menerapkannya?....kita simak pembahasan berikut...

A. PENDAHULUAN

Perngertian

Hide pada JQuery yang dimaksud adalah Suatu Efek yang ada pada JQuery yang digunakan untuk menyembunyikan suatu elemen. Show pada JQuery adalah suatu efek, dimana kita dapat menampilkan elemen yang telah dihidden dengan menggunakan hide.
Fade yaitu suatu efek pada JQuery yang digunakan untuk memberi efek luntur saat tombol di klik, Fade ini dapat diterapkan pada hide dan Show.

Latar Belakang

Ingin menggunakan JQuery semaksimal mungkin, diawali dengan efek Hide, Show dan juga Fade pada JQuery.

Maksud dan Tujuan

Ingin Menguasai JQuery

B. ALAT DAN BAHAN

Text Editor.
Web Browser.
file Library JQuery.

C. JANGKA WAKTU PELAKSANAAN

Sekitar 45menit untuk mempelajarinya (jika saya).

D. RANGKAIAN KEGIATAN

Hide and Show pada JQuery

seperti yang saya sampaikan diatas, efek Hide digunakan untuk menyembunyikan suatu elemen. karena Hide dan Show hampir sama, maka contohnya saya jadikan 1. berikut adalah contoh penggunaan Hide dan Show pada JQuery :

anda juga dapat mengisi didalah kurung setelah hide atau show, hal itu digunakan untuk mengatur kecepatan saat elemen disembunyikan atau ditampilkan nanti.

dan jika filenya disave dan dibuka di browser, maka hasilnya akan menjadi seperti ini...

jika tombol sembunyikan di klik, maka hasilnya akan menjadi seperti ini (elemen p) akan disembunyikan....

dan jika di klik Tampilkan maka elemen p akan muncul lagi....

nah, kenapa hal itu bisa terjadi?. karena kita telah menuliskan perintah untuk memanggil fungsi yang berfungsi untuk menyembunyikan dan menampilkan teks pada elemen p, nah, bukan hanya karena itu, itu juga terjadi karena kita telah memanggil file JQuery nya. dan juga id yang ada pada elemen HTML sesuai dengan nama id yang ada di script pemanggilan JQuery.

Fade pada JQuery

Seperti yang saya jelaskan diatas tadi, Fade pada JQuery berfungsi untuk memberi efek luntur pada elemen HTML.

JQuery memiliki beberapa efek Fade, yaitu sebagai berikut :

FadeIn() = digunakan untuk menampilkan objek yang tersembunyi dengan menciptakan efek kenalkan tingkat transparasi.
FadeOut() = digunakan untuk menyembunyikan objek yang tampil dengan menciptakan efek penurunan tingkat transparasi hingga pada akhirnya menghilang total (display: none;).
FadeToggle() = merupakan gabungan antara efek FadeIn() dan FadeOut(). jadi saat elemen sedang menghilang, maka FadeToggle() bertugas untuk menampilkannya, sedangkan saat elemen sedang tampil, maka, FadeToggle() bertugas untuk menyembunyikannya.
FadeTo() = memungkinkan untuk menciptakan penurunan tingkat transparasi sampai titik tertentu tanpa harus menghilangkan elemen seperti menggunakan efek FadeOut().

berikut adalah salah satu penulisan metode Fade diatas, yaitu FadeIn :

dan kemudian jika di save dan dibuka pada browser, maka hasilnya akan menjadi seperti ini...

dan jika button di klik, maka akan menjadi seperti berikut ini...

sebenarnya jika di klik akan membuat sebuah efek, namun, karena saya tidak cukup cepat untuk screenshoot nya, maka hasilnya pun hanya sebuah foto tersebut, anda akan mengerti jika mencoba sendiri :v.

E. HASIL YANG DIDAPATKAN

Dapat menggunakan efek Hide/Show dan Fade pada JQuery, serta mempraktekkan cara penggunaannya.

F. TEMUAN PERMASALAHAN

Tidak ada Efek karena file JQuerynya belum dipanggil.

G. KESIMPULAN

Hide => Menyembunyikan.
Show => Menampilkan.
Fade => Memudarkan.
dan efek semua itu tidak dapat digunakan jika file jquery.js/jquery.min.js belum dipanggil, serta tidak memunculkan efek jika penulisan script nya salah.

H. REFERENSI

Sekian sharing saya hari ini mengenai Hide/Show and Fade on JQuery semoga bermanfaat....

Wassalammualaikum Wr. Wb.

Share this