Salah satu yang membuat sebuah website menjadi sangat menarik adalah adanya animasi yang berjalan dan mudah untuk dijalankan di halaman website. Animasi ini tidak sekedar dimasukan dan digunakan oleh seorang programmer. Namun ada yang membuat animasi ini menjadi lebih menarik dan memudahkan berjalannya sistem di dalam website tersebut. Dan kita sering menyebutnya dengan API jQuery. API jQuery yang memudahkan Anda dalam animasi website tanpa perlu menggunakan plugin jquery. Lalu apa saja API jQuery ini?
1. Click
API ini berfungsi pada saat suatu element di klik dan Anda dapat membuat element HTML berubah dengan sesuka Anda, jika salah satu element html di klik. Semisal:
2. Toggle
Cara penggunaan " toggle " sama dengan " click ", API ini berfungsi jika element di klik. Tetapi di toggle memiliki keunggulan. Jika Anda menggunakan klik dan Anda hanya menginginkan 2 perubahan yang akan terjadi, semisal jika di klik menjadi 'A' atau menjadi 'B'.
kalau Anda menggunakan "click" maka Anda harus menyiapkan kondisi, toggle klik pertama akan menjadi 'B', ke dua menjadi 'A', sampai berapa pun hanya 'B' dan 'A'. Contoh script:
3. addClass dan removeClass
Anda dapat menambahkan atau menghilangkan class di suatu element. Di addClass dan removeClass Anda harus menggunakan aksi untuk memanggil API jquery ini. Sebagai contoh menggunakan " toggle ". Contoh script:
4. CSS
Hapir sama dengan " addClass " Anda dapat menambahkan script css ke dalam suatu element dengan melakukan aksi tertentu, tapi API ini tidak semudah dengan " addClass ". Anda menambahkan CSS secara inline. Jika "addClass", Anda harus sudah menyiapkan isi dari CSS yang akan Anda masukkan. Contoh script:
5. Animate
API ini hampir sama dengan CSS transition. Jika di CSS transition Anda harus mengatur transition apa, dan itu jelas berbeda – beda. Jika di animate, Anda hanya mengatur awal element seperti apa dan sampai hasil akhir animasi serperti apa. Contoh script:
6. IS
API is ini biasanya di gambungkan dengan jquery condisi " if ". Contoh script:
7. slideDown & slideUp
Di API Jquery ini Anda dimudahkan untuk membuat animasi element menjadi hilang atau muncul. Tetapi tidak langsung hilang atau muncul, ada animasi yang digunakan untuk menghilangkan dan memunculkan, yaitu ditampilkan dari atas ke bawah, dan tidak di tampilkan dari atas ke bawah. Contoh script:
8. SlideToggle
Intinya sama dengan slideDown & slideUp. Tapi Anda harus tepat Anda dapat menggunakan untuk apa. Tidak semua cocok dengan "slideToggle". Contoh script:
9. Trigger
API ini dapat memberi perintah ke suatu element untuk menjalankan aksi apa, misal di klik. Contoh script:
10. Show & Hide
Tidak dengan menggunakan css saja untuk menghilangkan atau menampilkan element. Dengan menggunakan Jquery juga bisa. Contoh script :
Anda tidak perlu untuk mencari plugin ke sana sini, Anda menggunakan API yang di berikan jQuery sudah cukup dan Anda bisa menggabungkannya menjadi yang Anda inginkan. Jika ada yang kurang jelas, bisa mencantumkan pertanyaan di kolom komentar ya :)
Selamat mencoba :)
Baca juga:
10 Tools Google untuk Membantu Kerja Webmaster
sumber : Media Bisnis Online Indonesia
Baca selengkapnya di --> Animasi Website Lebih Mudah dengan 10 API jQuery
Share Artikel ini! »»
|
|
|
Tweet |
0 comments:
Post a Comment