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 property display:none, bukan visibility:hidden. Kemudian untuk efeknya nanti baru kita tampilkan menggunakan metode toggle(), fadeToggle() ataupun slideToggle().
Penggunaan jQuery Toggle
jQuery Toggle digunakan untuk membuat efek
show() 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
}
<button id='btn1'>Toggle</button>
<div id='contoh1'>Contoh penggunaan jQuery toggle</div>
Default
$(document).ready(function(){
$("#btn1").click(function(){
$("#contoh1").toggle();
});
});
Dengan menambahkan parameter speed
$(document).ready(function(){
$("#btn1").click(function(){
$("#contoh1").toggle(1000);
});
});
Dengan menambahkan parameter callback
$(document).ready(function(){
$("#btn1").click(function(){
$("#contoh1").toggle(1000,function(){
alert("Pesan ini muncul setelah toggle selesai berjalan");
});
});
});
Penggunaan jQuery fadeToggle
Metode
fadeToggle() 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 metode
toggle().
#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/AVvXsEhBfeNzr0onEaLLf_X8RJsg3V27vIOejf6oYIUysvECROzLwHzO-SLvOjtZVT1sTv2d_q0FPkTsoMNf9sJIpD66JUJ9DxqUFX1lFItASYj3qP7DhzdeatQPz34wo4fymFTcDXIUZ1vnwJY/h200/Paramore+%287%29.jpg"/></div>
$(document).ready(function(){
$("#bton1").click(function(){
$("#gambar").fadeToggle();
});
});
Penggunaan jQuery slideToggle
Fungsinya sama seperti metode
toggle() 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
}
<div id="buton1">slideToggle</div>
<div id="contoh2">Contoh penggunaan jQuery slideToggle</div>
Default
$(document).ready(function(){
$("#buton1").click(function(){
$("#contoh2").slideToggle();
});
});
Dengan Menambahkan parameter speed
$(document).ready(function(){
$("#buton1").click(function(){
$("#contoh2").slideToggle(1000);
});
});
Dengan Menambahkan parameter callback
$(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: - milidetik (contoh:
1000, 2000, dst). "slow""fast" |
| easing | Opsional. Untuk menentukan kecepatan animasi pada titik tertentu. Value default yang digunakan adalah "swing" Value: "swing" bergerak lebih lambat di awal/akhir, tapi lebih cepat di tengah."linear" bergerak dalam kecepatan konstan. |
| callback | Opsional. Fungsi yang akan dieksekusi setelah metode toggle(), fadeToggle() ataupun slideToggle() sudah selesai berjalan. |
.png "Kompi Males By Firman")
