Penggunaan jQuery Efek Toggle, fadeToggle dan slideToggle � kata "toggle" didalam bahasa jQuery identik dengan efek show/hide yang tidak lain adalah sebuah tombol yang berfungsi untuk menampilkan atapun menyembunyikan elemen. Namun sebelum lebih lanjut ke tuorial ada baiknya kita pahami terlebih dahulu tentang apa itu jQuery serta cara menggunakannya. Agar lebih leluasa melakukan kontrol pada halaman web/blog pastikan terlebih dahulu sudah terpasang jQuery didalam template blog dan hanya menerapkan satu jQuery saja terserah mau menggunakan yang versi berapa, namun usahakan untuk menggunakan versi yang lebih baru. Karena versi yang terbaru adalah perbaikan dari bug yang terdapat pada versi sebelumnya. Versi terbaru jQuery saat ini adalah jquery-1.10.2. Untuk memasang jQuery didalam template bisa menaruhnya diatas kode </head> atau bisa juga di atas </body>. <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>Apabila sudah ada satu jQuery yang sudah terpasang didalam template, maka abaikan saja kode diatas. Sekarang kembali ke pokok bahasan untuk menerapkan jQuery Toggle, fadeToggle dan slideToggle. Metode ini sudah tidak asing lagi dan sering digunakan untuk membuat sedikit efek pada elemen tertentu didalam sebuah template. Agar mudah dipahami ada baiknya jika kita bahas satu per satu dari masing-masing efek tersebut.
Sebelum menentukan efek yang akan dipasang, terlebih dahulu sembunyikan elemen yang sudah anda pilih. Gunakan CSS propertydisplay:none, bukanvisibility:hidden. Kemudian untuk efeknya nanti baru kita tampilkan menggunakan metodetoggle(),fadeToggle()ataupunslideToggle().
Penggunaan jQuery Toggle
jQuery Toggle digunakan untuk membuat efekshow() dan hide() yang tidak lain adalah untuk menampilkan dan menyembunyikan elemen dengan menggunakan metode toggle(). Syntax yang di gunakan seperti dibawah ini: $(selector).toggle(speed,easing,callback)
Contoh:
Apabila di presentasikan contoh penulisannya script untuk menyembunyikan dan menampilkan suatu elemen seperti dibawah ini:
#btn1{
padding:5px 15px;
background:#2ecc71;
color:#fff;
border:none;
cursor:pointer;
display:inline-block
}
#contoh1{
display:none;
text-align:center;
background:#2ecc71;
color:#fff;
padding:50px 0
}
Default
<button id='btn1'>Toggle</button>
<div id='contoh1'>Contoh penggunaan jQuery toggle</div>
Dengan menambahkan parameter speed
$(document).ready(function(){
$("#btn1").click(function(){
$("#contoh1").toggle();
});
});
Dengan menambahkan parameter callback
$(document).ready(function(){
$("#btn1").click(function(){
$("#contoh1").toggle(1000);
});
});
$(document).ready(function(){
$("#btn1").click(function(){
$("#contoh1").toggle(1000,function(){
alert("Pesan ini muncul setelah toggle selesai berjalan");
});
});
});
Penggunaan jQuery fadeToggle
MetodefadeToggle() digunakan untuk memunculkan efek fadeIn() dan fadeOut() pada elemen yang sudah ditentukan. Syntax yang digunakan seperti dibawah ini: $(selector).fadeToggle(speed,easing,callback)
Contoh:
Untuk menambahkan parameter speed maupun callback langkahnya sama seperti pada metodetoggle().
#bton1{
padding:5px 15px;
background:#D94839;
color:#fff;
border:none;
cursor:pointer;
display:inline-block
}
#gambar{
display:none;
text-align:center;
padding:10px;
background:#E74C3C;
border:5px solid #fff
}
#gambar img{
width:300px;
height:200px;
border:5px solid #fff
}
<button id='bton1'>fadeToggle</button>
<div id="gambar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJB4up7vTAz-GN7k1_IDp4UHMepiQzXP6tOTotkufWemXKKQYItTe40tnJMzbJavU-HBbmPf1NRIJEAaw2rPWC_6EZfBHtJA0tXvo97pTCs51qV-Pgd_KGy9c6msBlikrJZTeHz1AJoUw/h200/Paramore+%287%29.jpg"/></div>
$(document).ready(function(){
$("#bton1").click(function(){
$("#gambar").fadeToggle();
});
});
Penggunaan jQuery slideToggle
Fungsinya sama seperti metodetoggle() dan fadeToggle(), hanya saja efeknya yang berbeda. Metode slideToggle() digunakan untuk membuat efek slideDown() dan slideUp(). Syntax yang digunakan seperti dibawah ini: $(selector).slideToggle(speed,easing,callback)
Contoh:
Contoh sederhana untuk deklarasi penulisannya script seperti dibawah ini:
#buton1{
padding:5px 15px;
background:#D94839;
color:#fff;
cursor:pointer;
display:inline-block
}
#contoh2{
display:none;
text-align:center;
background:#E74C3C;
color:#fff;
padding:50px 0
}
Default
<div id="buton1">slideToggle</div>
<div id="contoh2">Contoh penggunaan jQuery slideToggle</div>
Dengan Menambahkan parameter speed
$(document).ready(function(){
$("#buton1").click(function(){
$("#contoh2").slideToggle();
});
});
Dengan Menambahkan parameter callback
$(document).ready(function(){
$("#buton1").click(function(){
$("#contoh2").slideToggle(1000);
});
});
$(document).ready(function(){
$("#buton1").click(function(){
$("#contoh2").slideToggle(1000,function(){
alert("Pesan ini muncul setelah slideToggle selesai berjalan");
});
});
});
Konfigurasi:
| Parameter | Deskripsi |
|---|---|
| speed | Opsional. Untuk menentukan kecepatan efek. Value:
|
| easing | Opsional. Untuk menentukan kecepatan animasi pada titik tertentu. Value default yang digunakan adalah "swing" Value:
|
| callback | Opsional. Fungsi yang akan dieksekusi setelah metode toggle(), fadeToggle() ataupun slideToggle() sudah selesai berjalan. |
Demikian artikel tentang Penggunaan jQuery Toggle, fadeToggle dan slideToggle ini dapat kami sampaikan, semoga artikel atau info tentang Penggunaan jQuery Toggle, fadeToggle dan slideToggle ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
