Cara Membuat Blog, template blogger, tips and trick, berita, games, software downloads, widgets blog, firman webs

Penggunaan jQuery Toggle, fadeToggle dan slideToggle

Penggunaan jQuery Toggle, fadeToggle dan slideTogglePenggunaan 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/AVvXsEiDlRtgrPxSOuOPaTxbPyrZE0n-FRovNoXAVXzbJBWQ-8F6kAtTxd2ufcn7W8_-t0BOISZ0vLjQI9F1h90ZCSLeEVXmbhDgu3AITtVNDO8NqxUTJF2OPyqeOZsEF_U5pBFpW0HNi-3uzLw/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:

ParameterDeskripsi
speedOpsional. Untuk menentukan kecepatan efek.

Value:

  • milidetik (contoh: 1000, 2000, dst).
  • "slow"
  • "fast"
easingOpsional. 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.
callbackOpsional. Fungsi yang akan dieksekusi setelah metode toggle(), fadeToggle() ataupun slideToggle() sudah selesai berjalan.

0 Response to "Penggunaan jQuery Toggle, fadeToggle dan slideToggle"

  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Penggunaan jQuery Toggle, fadeToggle dan slideToggle" ini bermanfaat, share ke jejaring sosial.
Konversi Kode