jQuery: Page sections animation

Display page sections with animation

by Porfirio Chavez

HTML

<div id="mycontainer">
  <div id="myheader">Header</div>
  <div id="mybody">Body</div>
  <div id="myfooter">Footer</div>
</div>

CSS

div {
  display: none;
}

#mycontainer {
    height: 210px;
    width: 200px;
    background: #99CCFF;
}

#myheader {
    height: 60px;
    background: #FC3;
}

#mybody {
    height: 120px;
    background: #F63;
}
#myfooter {
    height: 30px;
    background: #C00;
}

JavaScript

function animate(){
    var x = $("#mycontainer");
    x.show(300, anihead);
}

function anihead(){
    var x = $("#myheader");
    x.show(300, anibody);
}

function anibody(){
    var x = $("#mybody");
    x.show(300, anifooter);
}

function anifooter(){
    var x = $("#myfooter");
    x.show(300);
}

$(document).ready(animate);