jQuery merupakan pemanis dalam membuat website, karena jquery mempunyai banyak method effect. Banyak yang dapat kita lakukan dengan jquery dari membuat animasi serta pengolahan data . Tutorial ini akan mencakup semua method jQuery show dan hide untuk membuat efek visual.
Menampilkan dan Menyembunyikan Elemen
Perintah untuk menampilkan dan menyembunyikan elemen cukup banyak seperti yang kita ketahui- show () perintah untuk menampilkan elemen HTML dan hide () digunakan untuk melakukan perintah menyembunyikan elemen HTML.
 Contoh Script Show()
Berikut adalah script sederhana untuk metode show () –
|
1 |
[selector].show( speed, [callback] ); |
Berikut ini adalah deskripsi dari semua parameter –
- speed – String yang mewakili salah satu dari tiga kecepatan yang ditentukan sebelumnya (“slow”, “normal”, atau “fast”) atau jumlah milliseconds untuk menjalankan animasi (e.g. 1000).
- callback – Parameter opsional ini mewakili fungsi yang akan dieksekusi setiap kali animasi selesai; dijalankan sekali untuk setiap elemen yang dianimasikan.
Berikut ini adalah sintaks sederhana untuk metode hide () –
|
1 |
[selector].hide( speed, [callback] ); |
Berikut ini adalah deskripsi dari semua parameter –
- speed – String yang mewakili salah satu dari tiga kecepatan yang ditentukan sebelumnya (“slow”, “normal”, atau “fast”) atau jumlah milliseconds untuk menjalankan animasi (e.g. 1000).
- callback – Parameter opsional ini mewakili fungsi yang akan dieksekusi setiap kali animasi selesai; dijalankan sekali untuk setiap elemen yang dianimasikan.
Contoh
Berikut contoh dari Cara Menyembunyikan Div dan Text dengan jquery, silahkan Anda simak,
|
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 33 34 35 36 37 38 39 40 41 42 |
<html> <head> <title>Cara Menyembunyikan Div dan Text dengan jquery</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("#show").click(function () { $(".mydiv").show( 1000 ); }); $("#hide").click(function () { $(".mydiv").hide( 1000 ); }); }); </script> <style> .mydiv{ margin:10px; padding:12px; border:2px solid #f6230b; width:100px; height:100px; color: #0bb4f6; } </style> </head> <body> <div class = "mydiv"> This is a SQUARE </div> <input id = "hide" type = "button" value = "Hide" /> <input id = "show" type = "button" value = "Show" /> </body> </html> |
Dari contoh di atas maka akan menghasilkan output seperti di bawah ini;
Oke itulah tadi pembahasan saya tentang Cara Menyembunyikan Div dan Text dengan jquery, semoga bermanfaat.