Home » Uncategories » JQuery Tutorial Part 3 : Slide and Animate

JQuery Tutorial Part 3 : Slide and Animate

Assalammualaikum Wr. Wb.

Bertemu lagi bersama saya...kali ini saya akan sharing mengenai JQuery Slide dan Animate. Untuk Kelanjutannya, simak pembahasan berikut ini yaaa....



 A. PENDAHULUAN
  • Pengertian
  1. Slide dengan fungsi ini, kita dapat menggunakan animasi SlideUp dan SlideDown dimana anda dapat membuat animasi dengan menggunakan fungsi ini
  2. Animate adalah sebuah fungsi pada JQuery dimana anda dapat membuat animasi sesuai kreasi anda.
  • Latar Belakang
Ingin mempelajari mengenai Slide dan Animate pada Javascript.
  • Maksud dan Tujuan
Assalammualaikum Wr. Wb.

Bertemu lagi bersama saya...kali ini saya akan sharing mengenai JQuery Slide dan Animate. Untuk Kelanjutannya, simak pembahasan berikut ini yaaa....

 A. PENDAHULUAN
  • Pengertian
  1. Slide dengan fungsi ini, kita dapat menggunakan animasi SlideUp dan SlideDown dimana anda dapat membuat animasi dengan menggunakan fungsi ini
  2. Animate adalah sebuah fungsi pada JQuery dimana anda dapat membuat animasi sesuai kreasi anda.
  • Latar Belakang
Ingin mempelajari mengenai Slide dan Animate pada Javascript.
  • Maksud dan Tujuan
Dapat menggunakan Slide dan Animate serta, menguasai Javascript.



B. ALAT DAN BAHAN
  • Text Editor.
  • Web Browser.
  • JQuery (salah satu library javascript).
C. JANGKA WAKTU PELAKSANAAN
  •  Sekitar 1jam an
D. RANGKAIAN KEGIATAN
  • Slide
slide digunakan untuk efek menggulung. seperti yang saya katakan diatas tadi, kita dapat menggunakan animasi slideUp dan slideDown, serta slideToggle.

berikut merupakan contoh penerapan slide dalam HTML.


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

dan jika Klik untuk slide ke atas di klik, maka hasilnya, tulisan Ini Adalah yang di slide akan menggulung ke atas. menjadi seperti berikut ini...

anda dapat mengganti slideUp dengan slideDown untuk efek menggulung ke bawah, dan juga slideToggle untuk gabungan dari keduanya
  • Animate
seperti yang saya sebutkan tadi, Animate digunakan untuk memberi efek animasi. dengan fungsi ini, anda dapat membuat animasi sesuai kreasi anda.

berikut merupakan contoh penggunaan fungsi animate() :

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

dan jika tombol Animasi di klik, maka akan memunculkan animasi sebagai berikut ini...
  •  



E. HASIL YANG DIDAPATKAN
  • Dapat menggunakan efek slide dan Animate pada JQuery
F. TEMUAN PERMASALAHAN
  • JQuery tidak bekerja, karena salah memanggil file JQuerynya
G. KESIMPULAN
  • Jika kita salah memanggil file JQuery nya, maka JQuery tidak akan bekerja.
H. REFERENSI

Sekian sharing yang dapat saya sampaikan kali ini....

Semoga Bermanfaat...

Wassalammualaikum Wr. Wb.


Subscribe to: Post Comments (Atom)