Animasi konten berurutan

Maksud Animasi konten berurutan adalah terbukanya elemen secara perlahan-lahan hingga elemen tersebut terbuka dengan sempurna. dengan jquery animation kita bis membuat animasi ini terlihat indah karena pergerakan elemennya yang perlahan-lahan membuat animasi terlihat hidup.

ILUSTRASI

#zhinto {
position: fixed;
background: #5a1;
padding: 10px;
display: inline-block;
margin: 5px;
top: -100px;
width: 30px;
height: 15px;
overflow: hidden
}
#zhinto span.tutup {
position: absolute;
background: #336B05;
padding: 2px 15px;
top: 0;
left: 0;
cursor: pointer;
color: #eee
}
#zhinto div.isi{
padding: 10px;
margin: 20px 0 0;
display: none;
font: normal 14px/20px Arial,sans-serif;
overflow: auto;
height: 190px;
}

$(function(){
$(window).load(function(){
$("#zhinto").animate({"top":"25%"}, 1000, "easeOutBounce").animate({"width":"70%"}, 4000).animate({"height":"50%"}, 4000, function (){
// setelah animasi selesai maka elemen dengan kelas isi akan muncul dengan efek fadeIn
$(".isi").fadeIn();
});
});
// saat tombol x diklik
$(".tutup").click(function(){
// terlebih dahulu elemen dengan kelas ini dihilangkan dengan efek fadeOut
$(".isi").fadeOut();
// Lalu buat gerakan animasi menutup dengan mengurangi nilai height dan width dan top
$("#zhinto").animate({"height":"15px"}, 4000).animate({"width":"30px"}, 4000).animate({"top":"-50%"}, 1000).fadeOut();
});
});

<div id='zhinto'>
<span class='tutup'>&#10006;</span>
<div class='isi'>
Disini isi dari teks anda
</div>
</div>

Oh iya karena pada kode terdapat efek easeOutBounce yang dihasilkan dari jquery UI maka disini anda harus mempunyai javascript jquery UI

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

Simpan dibawah framework jquery. jika anda ingin mengunduhnya silahkan download dibawah ini

DOWNLOAD

Atau jika anda tidak ingin menggunakan efek pantulan yang menggunakan jquery UI maka hapus saja kode easeOutBounce dari DOM. jadi seperti dibawah ini kodenya.

$(function(){
$(window).load(function(){
$("#zhinto").animate({"top":"25%"}, 1000).animate({"width":"70%"}, 4000).animate({"height":"50%"}, 4000, function (){
// setelah animasi selesai maka elemen dengan kelas isi akan muncul dengan efek fadeIn
$(".isi").fadeIn();
});
});
// saat tombol x diklik
$(".tutup").click(function(){
// terlebih dahulu elemen dengan kelas isi dihilangkan dengan efek fadeOut
$(".isi").fadeOut();
// Lalu buat gerakan animasi menutup dengan mengurangi nilai height dan width dan top
$("#zhinto").animate({"height":"15px"}, 4000).animate({"width":"30px"}, 4000).animate({"top":"-50%"}, 1000).fadeOut();
});
});