Test

http://hompimpaalaihumgambreng.blogspot.com/2011/12/alternatif-efek-toggle-untuk-animate.html?showComment=1357349385971#c720835879784803684

by Taufik Nurrohman

HTML

<!-- 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>

</script>

JavaScript

// 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();
});