Alternatif Efek Toggle untuk .animate()

Rabu, 07 Desember 2011

Tabel Konten

Masalahnya adalah, .animate() tidak memiliki kemampuan untuk melakukan toggle animasi (setidaknya untuk saat ini). Sehingga cara yang biasa dilakukan untuk membuat sistem animasi bolak-balik adalah dengan membuat dua buah elemen pemicu. Pemicu pertama digunakan untuk melakukan aksi animasi dan pemicu ke dua digunakan untuk mengembalikan efek animasi yang terjadi menuju ke keadaan semula.

Ada alternatif lain sebenarnya, yaitu dengan cara mengombinasikan efek .animate() dengan fungsi .show() dan .hide() Prinsip kerjanya sangat sederhana: Dua buah tombol (elemen pemicu) dibuat dengan CLASS yang berbeda. Salah satu tombol bertugas untuk menjalankan animasi dan yang satunya lagi digunakan untuk mengembalikan efek animasi yang terjadi. Sampai di sini, dalam bayanganmu pasti akan tercipta dua buah tombol dalam bidang kerjamu. Nah, untuk itulah alasan kita menggunakan fungsi .show() dan .hide() sebagai pembantu. Fungsi ini sebenarnya tidak terlibat secara langsung dalam terciptanya efek animasi, melankan hanya bertugas untuk menampilkan dan menyembunyikan tombol pemicu secara bergantian. Sehingga setiap kali aksi klik dilakukan, maka hanya akan ada satu tombol saja yang tampil:

Lihat Demo

Baris Kode untuk Efek Toggle Animasi

Kerangka Objek

<div id='objek'>
     ...
</div>

<div id='button-wrapper'>
     <button class='panjang'>Panjang</button>
     <button class='pendek' style='display:none;'>Pendek</button>
</div>

CSS

#objek {
  width:200px;
  height:50px;
  background:#8E9E2C;
}

jQuery

$(document).ready(function() {
     $('.panjang').click(function() {
          $('#objek').animate({width:"900px"}, 400);
          $(this).hide();$('.pendek').show();
     });

 $('.pendek').click(function() {
          $('#objek').animate({width:"200px"}, 400);
          $(this).hide();$('.panjang').show();
     });
});

Perhatikan bahwa Saya menambahkan display:none; pada tombol ke dua. Tujuannya adalah agar hanya tombol pertama saja yang tampak, sedangkan tombol ke dua tidak boleh tampak.

Saat aksi klik pada tombol .panjang (tombol yang terlihat) terjadi, maka efek animasi akan berjalan pada #objek:

$('.panjang').click(function() {
$('#objek').animate({width:"900px"}, 400);
.....
.....

Namun pada saat yang bersamaan juga akan menghilangkan dirinya sendiri:

$(this).hide();

Dan pada saat yang bersamaan juga akan menampilkan tombol yang tersembunyi (dalam hal ini adalah .pendek):

$('.pendek').show();

Sekarang tombol .pendek terlihat dan tombol .panjang menghilang. Saat aksi klik pada tombol .pendek terjadi, maka efek animasi akan berjalan pada #objek:

$('.pendek').click(function() {
$('#objek').animate({width:"200px"}, 400);
.....
.....

Namun pada saat yang bersamaan juga akan menghilangkan dirinya sendiri:

$(this).hide();

Dan pada saat yang bersamaan juga akan menampilkan tombol yang tersembunyi (dalam hal ini adalah .panjang):

$('.panjang').show();

Begitu saja cara kerjanya. Sangat sederhana :)

Cara ke Dua

Event .toggle() juga bisa digunakan untuk menganimasikan elemen secara bergantian (pelajari di sini):

$(document).ready(function() {
    $('button').toggle(function() {
        $('#objek').animate({width:"900px"}, 400);
    }, function() {
        $('#objek').animate({width:"200px"}, 400);
    });
});

8 Komentar

Unknown

Rabu, 07 Desember 2011 11:08 AM

Waw trimaksih banyak, kalau Tutorial jQuerynya d bkin ebook pasti mantap,

izin mempelajari :)

iam

Rabu, 07 Desember 2011 03:52 PM

Bener2 top banget ini jquery. :D
Pengin mempelajari lebih dalam, tapi saya lagi fokus dulu ke PHP >.<

Adi Nugraha Y

Sabtu, 05 Januari 2013 08:29 AM

mas, kalo pengen animate kotak dari height 0px menjadi 100%/auto itu gimana? saya pake kode :
$("#topbar").animate({ height: "100%" }, 1000);

dari kode :

<!-- stylenya -->
<style>
#topbar {
background: orange;
color: white;
height: 10px;
text-align:center;
width:60px;
}
</style>

<!-- bagian target -->
<button class='tombol'>tombolhide</button>
<div id='topbar'>Abakadabra<br>Ayolah<br>Berfungsi<br>oh god -_-</div>

<!-- scriptnya -->
<script>
$('.tombol').click(function() {
$("#topbar").animate({ width: "300px" }, 500 )
$("#topbar").animate({ height: "100%" }, 1000);
$('.tombol').hide();
});
</script>

kok yang ada malah flat :( sebelumnya Terima Kasih :)

Taufik Nurrohman

Sabtu, 05 Januari 2013 08:53 AM

Animasi tinggi auto atau 100% itu agak susah, bahkan di CSS transisi. Ada satu teknik untuk membuatnya teranimasi menjadi tinggi auto, yaitu dengan membuat kloningan dari elemen tersebut keudian set dengan tinggi auto. Lalu kita ambil nilai tinggnya sebelum kemudian kita hilangkan lagi:

// buat satu kloningan dari elemen yang ingin dianimasikan, lalu set tingginya menjadi `height:auto` dan sisipkan ke `<body>`
var $getHeight = $('#topbar').clone().css('height', 'auto').appendTo($(document.body));
// dapatkan tinggi elemen kloning tersebut
var theHeight = $getHeight.height();
// setelah tingginya didapat, kita bisa membuangnya!
$getHeight.remove();

$('.tombol').click(function() {
$("#topbar").animate({
width: "300px"
}, 500).animate({
height: theHeight // bukan `100%` tapi `theHeight` (ukuran tinggi duplikat elemen tadi, yang memiliki satuan piksel)
}, 1000);
$(this).hide();
});

Demo: http://jsfiddle.net/tovic/43eG7/60/
Kalo kamu nggak ngerti nggak apa-apa, yang penting jadi :D

Adi Nugraha Y

Sabtu, 05 Januari 2013 09:27 AM

yah namanya juga saya masih orang awam, boro-boro JS, css aja kadang-kadang bingung -_- berarti kalo pengen animasikan width yang tidak diketahui juga caranya seperti itu ya mas? trus CSS yang tadi itu perlu ditulis juga ke bagian HTML apa cukup cantumin Jqueri yang mas kasih itu? :\ btw makasih banyak mas :D