Membuat Efek Show dan Hide Dengan JQuery Toggle - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Membuat Efek Show dan Hide Dengan JQuery Toggle , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Javascript Dan JQuery, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Efek Show dan Hide Dengan JQuery Toggle
link : Membuat Efek Show dan Hide Dengan JQuery Toggle

Membuat Efek Show dan Hide Dengan 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)

Agar bisa lebih mudah dalam memahami penggunaan JQuery toggle ikutilah contoh di bawah ini. Pada contoh ini kita akan menyembunyikan dan menampilkan suatu elemen HTML.

CSS

#button{
padding:5px 15px;
background:#2ecc71;
color:#fff;
border:none;
cursor:pointer;
display:inline-block
}
#isi{
display:none;
text-align:center;
background:#2ecc71;
color:#fff;
padding:50px 0
}

HTML

<button id='button'>Toggle</button>
<div id='isi'>Penggunaan jQuery toggle</div> 

JQuery

$(document).ready(function(){
  $("#button").click(function(){
    $("#isi").toggle();
  });
});

 Untuk melihat hasil dari script di atas klik link Contoh JQuery Toggle


Pada JQuery toggle ini kita bisa menambahkan parameter speed untuk membuat efek animasinya lebih terlihat.

$(document).ready(function(){
  $("#button").click(function(){
    $("#isi").toggle(1000); //parameter speed
  });
});

Menambahkan parameter Callback

$(document).ready(function(){
  $("#button").click(function(){
    $("#isi").toggle(1000,function(){
      alert("Pesan ini muncul setelah toggle selesai berjalan");
    });
  });
}); 

Demikianlah Artikel Membuat Efek Show dan Hide Dengan JQuery Toggle

Sekianlah artikel Membuat Efek Show dan Hide Dengan JQuery Toggle kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Efek Show dan Hide Dengan JQuery Toggle dengan alamat link https://dev-create.blogspot.com/2016/12/membuat-efek-show-dan-hide-dengan.html