Belajar jQuery Part 3 : Memahami Effect serta Cara Membuatnya


Belajar JQuery
Belajar JQuery

IRVAN GEN – Halo teman -teman salam jumpa kembali di pertemuan yang ke-3 di sesi belajar jQuery. Sebelumnya kita pernah membahas Mengenal Dasar jQuery. Pada pertemuan yang ke-3 saya akan mengulas tentang Memahami Efek Pada jQuery.

Fungsi efek, merupakan fungsi dari JavaScript yang kemudian dirangkum menjadi fungsi jQuery sehinggua memudahkan dalam penggunaannya.

Penggunaan efek pada jQuery sangat mudah digunakan, karena jQuery memiliki syntax yang pendek dan pastinya mudah dimengerti, berikut ini beberapa efek pada jQuery.

  • show()
    Efek jQuery yang berfungsi untuk menampilkan element
  • hide()
    Efek jQuery yang berfungsi untuk menyembunyikan element
  • toggle()
    Efek jQuery yang berfungsi untuk menampilkan atau menyembunyikan element
  • fadeIn()
    Efek jQuery yang berfungsi untuk menampilkan element dengan efek memudar
  • fadeOut()
    Efek jQuery yang berfungsi untuk menyembunyikan element dengan efek memudar
  • fadeToggle()
    Efek jQuery yang berfungsi untuk menampilkan atau menyembunyikan dengan efek memudar
  • slideUp()
    Efek jQuery yang berfungsi untuk menyembunyikan element dengan efek slide
  • slideDown()
    Efek jQuery yang berfungsi untuk menampilkan element dengan efek slide
  • slideToggle()
    Efek jQuery yang berfungsi untuk menampilkan atau menyembunyikan element dengan efek slide
  • animate()
    Efek jQuery yang berfungsi untuk membuat sebuah efek animasi pada element

Masing – masing efek pada jQuery memiliki fungsinya, kamu dapat pahami sendiri, dan sekarang kita mulai latihan untuk membuat beberapa efek jQuery.

Tutorial Membuat Efek show() & hide() pada jQuery

Seperti biasa, kita akan latihan membuat efek jQuery dimulai dari urutan show() dan hide(), yang harus disiapkan index.html dan style.css. Silahkan teman – teman buat dulu ke-2 file itu dan jangan lupa hubungkan dengan file jquery.js nya. Dibawah ini saya sudah menulis contoh index.html dan style.css, berikut cara penulisannya.

index.html

Save file dengan nama index.html

kemudian file style.css

Save dengan nama style.css jangan lupa semua file index.html, style.css dan file jquery-3.3.1.js satukan dalam satu folder.

Sebelum dijalankan, saya akan menerangkan sedikit cara kerja dari kode program diatas.

Disini saya membuat 2 buah tombol diberi tanda id(#) yang pertama #tombol1 dan #tombol2. Kemudian kita beri event, sebelumnya kita pernah belajar memahami event dan selector. Nah event ini berfungsi jika element tombol yang kita buat kemudian diklik maka akan merespon sesuai dengan fungsi efek tersebut. Terdapat pada kode program bagian ini.

Kemudian diantara kode ini berfungsi untuk menampilkan box.

Dan yang ini, untuk menyembunyikan box.

Bagaimana paham? Baik saya anggap teman – teman sudah paham. Gambar dibawah ini adalah hasil dari kode tersebut.

Cara Membuat Efek hide() & show() pada jQuery - IRVAN GEN
Cara Membuat Efek hide() & show() pada jQuery – IRVAN GEN

Tutorial Membuat Efek toggle() pada jQuery

Setelah berhasil membuat efek show dan hide mari kita lanjut dengan efek toggle, toggle berfungsi untuk menampilkan atau menyembunyikan element.

index.html

style.css

 

Ada sedikit perbedaan dengan fungsi efek sebelumnya, jika efek show() dan hide() menggunakan 2 buah tombol, kalau ini menggunakan 1 tombol namun berfungsi untuk 2 efek sekaligus karena kita menggunakan fuction toggle().

Hasilnya..

Cara Membuat Efek toggle_1 pada jQuery - IRVAN GEN
Cara Membuat Efek toggle_1 pada jQuery – IRVAN GEN

Berfungsi dengan demikian.

Cara Membuat Efek toggle_2 pada jQuery - IRVAN GEN
Cara Membuat Efek toggle_2 pada jQuery – IRVAN GEN

Tutorial Membuat Efek fadeIn() dan fadeOut() pada jQuery

Langsung saja kita menulis kode programnya.

index.html

style.css

Hasilnya

Cara Membuat Efek Fade pada jQuery - IRVAN GEN
Cara Membuat Efek Fade pada jQuery – IRVAN GEN

Cara Memberi Durasi Efek Fade pada jQuery

Kamu bisa memberi waktu durasi untuk efek fade dengan cara memasukan nilai pada parameter fuction, seperti, slow dan fast. Berikut contohnya.

slow

fast

Bisa juga dengan memberi nilai berupa angka untuk durasi waktunya, contohnya.

Teman – teman bisa lihat contoh penulisan kode program untuk memberi durasi waktu pada efek fade.

style.css

Tutorial Membuat Efek slideUp() dan slideDown() pada jQuery

Untuk membuat efek slide sangat mudah, sama seperti membuat efek show dan hide jadi kamu hanya tinggal fungsi efeknya saja. Contohnya seperti ini.

index.html

style.css

Hasilnya dapat dicek sendiri..

Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini, tentang Memahami Effect jQuery serta Cara Membuatnya. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Terimakasih.

Nilai kualitas konten


Irvan Nurfazri
Fakir ilmu yang selalu berusaha memantaskan diri dihadapan-Nya.Menulis apa yang saya sukai dan berbagi apa yang saya ketahui.

0 Comments

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *