Technology

Animasi Website Lebih Mudah dengan 10 API jQuery

 

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:

 element id " other " di klik, maka element id " target " akan ikut di klik.
 $( "#other" ).click(function() {
 $( "#target" ).click();
 });

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:

 $( "div" ).toggle(
 function() {
 $( this ).addClass( "selected" );
 }, function() {
 $( this ).removeClass( "selected" );
 }
 );

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:

 $( "div" ).toggle(
 function() {
 $( this ).addClass( "selected" );
 }, function() {
 $( this ).removeClass( "selected" );
 }
 );

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:

 $( "p" ).on( "mouseover", function() {
 $( this ).css( "color", "red" );
 });

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:

 $( "#go" ).click(function() {
 $( "#block" ).animate({
 width: "70%",
 opacity: 0.4,
 marginLeft: "0.6in",
 fontSize: "3em",
 borderWidth: "10px"
 }, 1500 );
 });

6. IS

API is ini biasanya di gambungkan dengan jquery condisi ” if “. Contoh script:

 $( "ul" ).click(function( event ) {
 var target = $( event.target );
 if ( target.is( "li" ) ) { ---> condisi " if " ada di sini.
 target.css( "background-color", "red" );
 }
 });

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:

 slide up
 $( "#book" ).slideUp( "slow", function() {
 // Animation complete.
 });
slide down
 $( "#book" ).slideDown( "slow", function() {
 // Animation complete.
 });

8. SlideToggle

Intinya sama dengan slideDown & slideUp. Tapi Anda harus tepat Anda dapat menggunakan untuk apa. Tidak semua cocok dengan “slideToggle”. Contoh script:

 $( "p" ).slideToggle( "slow" );

9. Trigger

API ini dapat memberi perintah ke suatu element untuk menjalankan aksi apa, misal di klik. Contoh script:

$( "#foo" ).trigger( "click" );

10. Show & Hide

Tidak dengan menggunakan css saja untuk menghilangkan atau menampilkan element. Dengan menggunakan Jquery juga bisa. Contoh script :

 show
 $( ".target" ).show();
 hide
 $( ".target" ).hide();

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

Membuat Menu Drop Down pada Website dengan CSS3

Mengukur Kecepatan Loading Website dengan YSlow


Berikan Komentar

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