Jumat, 18 Mei 2018

Belajar jQuery : Effect Pada jQuery dan Contoh Penggunaanya


Codins - Sebelumnya kita telah mempelajari event pada jquery yang bisa anda baca kembali pada halaman Belajar jQuery : Event jQuery dan Contoh Penggunaanya. Pada artikel belajar jquery kali ini saya akan membuat artikel untuk mempelajari Effect pada jquery beserta contoh penggunaanya. Effect pada jquery sangat berguna untuk memberikan tampilan yang interaktif kepada user, penggunaanya juga mudah.

Effect Pada jQuery

Effect pada jquery ada banyak macamnya, anda bisa membaca effects jquery pada halaman resminya di : Effects Jquery. Beberapa effect tersebut diantaranya adalah : 
  • hide() : effect untuk menyembunyikan element
  • show() : effect untuk menampilkan element
  • toggle() : effect untuk menampilkan dan menyembuyikan element
  • fadeIn() : effect untuk menampilkan element dengan efek memudar
  • fadeOut() : effect untuk menyembunyikan element dengan efek memudar
  • fadeToggle : effect untuk menampilkan dan menyembuyikan element dengan efek memudar
  • slideDown() : effect untuk menampilkan element dengan efek slide down
  • slideUp() : effect untuk menampilkan element dengan efek slide
  • animate() : effect untuk membuat efek animasi pada element

Penggunaan Effect Pada jQuery

Untuk bahasan kedua tutorial ini kita akan membuat contoh penggunaan effect pada jquery. Disini saya akan membuat effect untuk menampilkan kota dengan efek slideDown dan slideUp. Pertama buatlah file html baru bernama effect.html kemudian isikan sintaks dibawah kedalam file tersebut : 

effect.html

Penjelasan sintaks diatas :

  • kita akan menyembunyikan terlebih dahulu kotak kita dengan css display:none
  • membuat tiga tombol yang berguna untuk menampilkan, menyembunyikan, dan menampilkan atau menyembunyikan, untuk id dari tombol bisa anda lihat sesuai sintaks diatas
  • kemudian kita buat event click pada tombol, tombol pertama adalah tombol untuk menampilkan kotak dengan nama #tombolshow
  • tombol kedua adalah tombol untuk menyembunyikan kotak dengan nama #tombolhide
  • tombol ketiga adalah tombol untuk menyembunyikan dan menampilkan kotak dengan nama #tomboltoggle serta effect slideToggle()
Kemudian cobalah untuk membuka file effect.html menggunakan browser yang anda gunakan. Jika berhasil maka akan tampil seperti berikut :

See the Pen MGEXez by Memem (@inoorsetyo) on CodePen.


Sampai disini dulu tutorial yang saya buat untuk Belajar jQuery : Effect Pada jQuery dan Contoh Penggunaanya. Semoga bisa bermanfaat bagi anda.

Related Posts

Belajar jQuery : Effect Pada jQuery dan Contoh Penggunaanya
4/ 5
Oleh