Hallo, apa kabar teman-teman semuanya, Pada tutorial sebelumnya kita telah belajar banyak efek dari jquery seperti .fadeIn() . fadeOut() .click() . animate() dan lain-lain, sebenarnya masih sangat banyak lagi efek jquery yang lainnya, namun pada kesempatan kali ini kita akan belajar salah satu fungsi dari efek jquery yaitu .delay(), oleh karena itu pada tutorial kali ini kita akan belajar mengenal fungsi efek .delay() pada jquery.
Fungsi efek .delay ini yaitu memberikan efek jedah pada efek satu terhadap efek yang lainnya, jadi dengan memberikan fungsi ini jedah waktu antara efek satu dengan yang lainnya akan lebih lama, untuk lebih jelasnya kita langsung saja praktekan, pertama silahkan teman-teman buat sebuah file html dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>delay demo</title> <style> div { position: absolute; width: 60px; height: 60px; float: left; } .kotak { background-color: #3f3; left: 10px; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p><button>Run</button></p> <div class="kotak"></div> <script> $( "button" ).click(function() { $( "div.kotak" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 ); }); </script> </body> </html> |
Saya akan menjelaskan script diatas satu per satu, pertama saya membuat sebuah div yang sava berikan class kotak:
|
1 |
<div class="kotak"></div> |
dan saya memberikan sebuah button yang akan menjalankan fungsinya,
|
1 |
<p><button>Run</button></p> |
Setelah itu saya membuat sedikit pengaturan css seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> div { position: absolute; width: 60px; height: 60px; float: left; } .kotak { background-color: #3f3; left: 10px; } </style> |
sehingga jika kita jalankan hasilnya akan seperti berikut ini :
Nah setelah itu saya mereload library dari jquery yang ada di jquery.com seperti berikut ini:
|
1 |
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> |
saya memanggilnya dengan online jadi teman-teman harus terkoneksi internet ya, setelah itu saya membuat sebuah script jquery untuk memberikan efek ketika tombol kita klik yang scriptnya seperti berikut ini:
|
1 2 3 4 5 |
<script> $( "button" ).click(function() { $( "div.kotak" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 ); }); </script> |
saya membuat sebuat efek ketika tombol diklik maka class pada div kotak mengalami efek slideup dengan nilai 300 dan delay atau jedah selama 800 lalu ditampilkan lagi dengan fadein dengan nilai 400,
Gimana teman-teman cukup mudah bukan? untuk tutorial kali ini tentang mengenal fungsi efek .delay() pada jquery sampai dini dulu, sampai bertemu pada tutorial berikutnya.